$.ajax() 案例

Posted 零点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了$.ajax() 案例相关的知识,希望对你有一定的参考价值。

一、提交数据

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() 案例的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

Javascript代码片段在drupal中不起作用

Ajax 异步请求(登录案例实现 + ajax实现二级联动)

ajax案例_校验用户名

GAMS学习笔记:案例分析10——Ajax纸业公司生产计划(附代码)

针对网页源代码中无数据的解决案例(Ajax动态加载JS))