异步jquery Get Post方式提交数据 load 加载数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.3.1.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库--> </head> <body><form action="" name="form1" id="form1"><input type="text" name="username" id="username" value="zhang"><br><input type="text" name="psw" id="psw" value="99999"><br> <input type="button" id="b1" value="登陆"></form><div id="one"></div></body><script language="JavaScript"> $().ready(function(){ $("#b1").click(function(){// /*// * $.get("get.jsp",jsonObj,function(data,textStatus)// * * 通过远程 HTTP GET 请求载入信息// * * 参数1:请求的路径// * * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}// * * 参数3:function(data,textStatus)// * * data:服务器返回的数据// * * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout // * // * * 方法的返回值是XMLHttpRequest对象 // */// var jsonObj={// username:$("#username").val(),// psw:$("#psw").val()// }// // $.get("get.jsp",jsonObj,function(data,textStatus){// alert(data); // $("#one").text(data); // });/******************************************************************************************************/ // /*// * $.post("get.jsp",jsonObj,function(data,textStatus)// * * 通过远程 HTTP post 请求载入信息// * * 参数1:请求的路径// * * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}// * * 参数3:function(data,textStatus)// * * data:服务器返回的数据// * * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout // * // * * 方法的返回值是XMLHttpRequest对象 // */// var jsonObj={// username:$("#username").val(),// psw:$("#psw").val()// }// // $.post("get.jsp",jsonObj,function(data,textStatus){// alert(data); // $("#one").text(data); // });/******************************************************************************************************/ $.post("get.jsp",$("#form1").serialize(),function(data,textStatus){ alert(data); $("#one").text(data); }); });});</script> </html>?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.4.2.js"> </script> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> <!--引入jquery的js库--> </head> <body> <form action="" name="form1" id="form1"> <input type="text" name="username" id="username" value="zhang"> <br> <input type="text" name="psw" id="psw" value="99999"> <br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> </body> <script language="JavaScript"> $().ready(function(){ $("#b1").click(function(){ /* * $("#one").load("load01.jsp",function(data,textStatus,xmlHttpRequest) * * 第一个参数:请求的路径 * * 第二个参数:发送到服务器的数据:格式{key1:value1,key2:value2} * * 第三个参数:回调函数 function(data,textStatus,xmlHttpRequest) * * data:服务器返回的数据 * * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout * * xmlHttpRequest:对象 * * * 如果没有传递参数 使用get 否则使用post * */ var jsonObj={ username:$("#username").val(), psw:$("#psw").val() } $("#one").load("load01.jsp h1,h2",jsonObj,function(data,textStatus,xmlHttpRequest){ alert(data); //alert(textStatus); }); }); }); </script></html>?