php+jquery+ajax表单数据交互

php+jquery+ajax表单实现数据传输，登陆成功后跳转新的页面
index页面

 <h1 style="text-align: center">Ajax测试</h1>
        <form id="login_value">
          <div>
            <label>用户名:</label>
            <input id="username" type="text" name="username" placeholder="请输入用户名">
          </div>
          <div>
            <label>密  码:</label>
            <input id="passwd" type="password" name="passwd" placeholder="请输入密码" maxlength="10">
          </div>
          <div>
            <input type="button" value="登陆" onclick="login()">
            <input type="reset" value="重置">
          </div>

js代码

 function login() {
    var text = $('#login_value').serialize();//jq提供的获取form表单数据的快捷方式，通过form内标签的name属性{"username":"admin","passwd":"123456"}
      $.ajax({
        url:'index.php',
        type:'POST',
        data:text + "&formSubmit=true",//一开始不加"&formSubmit=true"，后端php用$_POST['username']找不到参数，加了才正常
        dataType:'json',
        success:function(data){
          if(data.code==200){
            alert(data.msg)
            window.location.href="main.html";//登录成功后跳转新的页面
          }else {
            alert(data.msg)
          }
        }
      })
  }

php代码

<?php

$username = $_POST['username'];
if ($username=="admin"){
    $res = array('code'=>200,'msg'=>"登录成功");
}else{
    $res = array('code'=>404,'msg'=>"登陆失败！");
}
 echo json_encode($res);//因为ajax的dataType写了json，所以这里要返回的数据也要是json

效果图如下