码迷,mamicode.com
首页 > Web开发 > 详细

$.ajax() 案例

时间:2018-04-08 00:15:28      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:密码   button   jquer   loading   tle   password   username   word   har   

一、提交数据

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方式是必须的

 

二、提交表单

 

$.ajax() 案例

标签:密码   button   jquer   loading   tle   password   username   word   har   

原文地址:https://www.cnblogs.com/wsybky/p/8735192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!