$.ajax() 案例

最新推荐文章于 2024-06-20 16:11:11 发布

weixin_30703911

最新推荐文章于 2024-06-20 16:11:11 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

文章标签： php 数据库 json

原文链接：http://www.cnblogs.com/wsybky/p/8735192.html

一、提交数据

html部分：

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>JQueryAjax+PHP</title>
 5     <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 6 </head>
 7 <body>
 8 用户名:<input type="text" id="username" name="username" /><br>
 9 密码:<input type="password" id="password" name="password" /><br>
10 <button type="button" class="butn">ajax提交</button><br>
11 <span class="con"></span>
12 <script type="text/javascript">
13     $(document).ready(function(){
14 
15         $(".butn").click(function(){
16             var username = $("#username").val();
17             var password = $("#password").val();
18             $.ajax({
19                 url: "ht.php",
20                 type: "POST",
21                 data:{name:username,pwd:password}, /* 另外一种写法："name=username&pwd=password",  */
22                 dataType: "json",
23                 error: function(){
24                     alert('Error loading XML document');
25                 },
26                 success: function(data,status){//如果调用php成功
27                     alert(status);
28                     alert(data);
29                     $('.con').html("用户名:"+data['name']+"密码:"+data['password']);
30                 }
31             });
32         })
33 
34     })
35 </script>
36 </body>
37 </html>

php部分：

1 <?php
2 
3 $name = $_POST['name'];
4 $pwd = $_POST['pwd'];
5 
6 $arr = array('name'=>$name,'password'=>$pwd);
7 //这里进行一个些操作，如数据库交互等
8 
9 echo json_encode($arr); //json_encode方式是必须的