1 针对于form表单： 2 <!doctype html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 <body> 9 <form action=""> 10 姓名<input type="text" value="" id="" name="user"><br> 11 密码:<input type="password" value="" id="" name="pass"><br> 12 <select name="sex" id=""> 13 <option value="nv">女</option> 14 <option value="nan">男</option> 15 </select> 16 <button>提交</button> 17 </form> 18 <script src="jquery-1.8.3.min.js"></script> 19 <script> 20 $(function() { 21 $('button').click(function() {//只适合form表单 22 $.ajax({ 23 type:"get", 24 url:"act1.php", 25 data:$("form").serialize(), 26 dataType:"json", 27 success:function(data) { 28 alert(data.msg); 29 }, 30 }); 31 }) 32 }) 33 </script> 34 </body> 35 </html>
1 get方式： 2 <!doctype html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 <body> 9 登录：<input type="text" value="" id="inp1"><br> 10 密码：<input type="password" value="" id="inp2"> 11 <button>登录</button> 12 13 <script src="jquery-1.8.3.min.js"></script> 14 <script> 15 $(function() { 16 $('button').click(function() {//get方式的ajax,参数顺序不能变 17 $.get('act.php',{"user":$('#inp1').val(),"pass":$('#inp2').val()},function(data) { 18 alert(data.msg); 19 },'json'); 20 }) 21 }) 22 </script> 23 </body> 24 </html>
ajax通用方式：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 登录：<input type="text" value="" id="inp1"><br> 9 密码：<input type="password" value="" id="inp2"> 10 <button>登录</button> 11 <script src="jquery-1.8.3.min.js"></script> 12 <script> 13 $('button').eq(0).click(function() { 14 $.ajax({ 15 type:'get',//类型为get或者post，取决于后台 16 url:'act.php', 17 data:{"user":$('#inp1').val(),"pass":$('#inp2').val()}, 18 cache:false,//不读取缓存,和随机数，时间戳的作用一样 19 async:true,//默认的是异步加载，可以不写 20 dataType:"json",//返回的数据类型 21 success:function(data) {//请求冲成功的回调函数，请求的数据 作为参数传过来 22 console.log(typeof(data));//json 23 console.log(data); 24 alert(data.msg); 25 }, 26 /*error:function() {//请求失败的函数，可以没有 27 alert('请求失败'); 28 }, 29 complete:function() {//请求成功与失败都会执行，可以不写 30 alert('请求完成') 31 }*/ 32 }) 33 }) 34 </script> 35 </body> 36 </html>