guanzelin

1.ajax基本语法

<script>
 $(function(){
 $(\'#sub\').click(function(){
  var username=$(\'#username\').val();
  var password=$(\'#password\').val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $(\'#text\').empty(); //清空Text里面的所有内容
   var data=\'\';
   if(msg!=\'\'){
   data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
   }
   $(\'#text\').html("用户名为:" + data.username + ",密码为:" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },

  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>

2. php端的接收方法

<!--?php
 header(\'Content-type:text/json;charset=utf-8\');
 $username=$_POST[\'username\'];
 $password=$_POST[\'password\'];

 $data=\'{username:"\' . $username . \'",password:"\' . $password .\'"}\';//组合成json格式数据
 echo json_encode($data);//输出json数据
?>

3.html端代码demo.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajaxTest</title>
</head>
<body>
 <input type="text" id="username">
 <input type="text" id="password">
 <button id="sub">查询</button>
 <span id="text"></span><!-- 用以显示返回来的数据,只刷新这部分地方 -->
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</html>

分类:

技术点:

相关文章: