jquery的ajax的使用！

来源：互联网发布：asp企业网站源码下载编辑：程序博客网时间：2024/06/06 02:45

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">1.$.ajax的使用：</span>

<pre name="code" class="html">以login为例，ajax表单的提交！

以下是表单:

<body><form action="add" method="post" id="form">用户名:<input type="text" name="userName" id="userName"/><br/>密码:<input type="password" name="password" id="password"/><br/><input type="button" value="提交" id="submit"/></form></body>

提交的js:

<script type="text/javascript" src="../resources/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../resources/json2.js"></script><script type="text/javascript">$(function() {$("#submit").click(function() {ajaxRequest();//$("#form").serialize();//alert($("#form").serialize());})});function ajaxRequest() {$.ajax({url : "http://localhost:8080/TestLogin/user/login",type : "POST",contentType : "application/json",dataType : "JSON",data : JSON.stringify({"userName" : $("#userName").val(),"password" : $("#password").val()}),async : false,success : function(data) {

<span style="white-space:pre"></span>//成功后的操作$.each(data, function(index, element) {alert(index + ":" + element);});},error : function() {alert("error");}});}</script>

controller层(基于spring mvc)接收数据和改变数据：

@Controller@RequestMapping(value = "/user")public class UserController {@RequestMapping(value = "/login", method = RequestMethod.POST)@ResponseBodypublic User login(@RequestBody User u) {u.setUserName("tanlei");return u;}@RequestMapping(value = "/login", method = RequestMethod.GET)public String toLoginUi() {return "login";}}

2.$.get和$.post的使用:

使用url提交数据:

var url = "<%=projectUrl %>/menuManage/listSubMenu?menuNo="+menuNo + "&time=" + new Date().getTime(); //加时间戳避免ie缓存

$.get(url,function(data){<span style="white-space:pre"></span>if(data=="success"){<span style="white-space:pre"></span>document.location.reload();<span style="white-space:pre"></span>}<span style="white-space:pre"></span>});

其他提交数据方式：

<script language="JavaScript">   $().ready(function(){//     $("#b1").click(function(){// /*//  *  $.get("get.jsp",function(data,textStatus){});//  *    * 通过远程 HTTP GET 请求载入信息。//  *    * 参数1:请求的url//  *    * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}//  *    * 回调函数:function(data,textStatus)//  *          * data:服务器返回的数据//  *          * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.//  *    * 方法的返回值是xmlHttpRequest对象//  */// var jsonObj={// username:$("#username").val(),//psw:$("#psw").val()// }// //         $.get("get.jsp",jsonObj,function(data,textStatus){//             //alert(data);           //    $("#one").text(data);// });  //  });  $("#b1").click(function(){ /*  *  $.post("get.jsp",function(data,textStatus){});  *    * 通过远程 HTTP post 请求载入信息。  *    * 参数1:请求的url  *    * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}  *    * 回调函数:function(data,textStatus)  *          * data:服务器返回的数据  *          * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.  *    * 方法的返回值是xmlHttpRequest对象  */// var jsonObj={// username:$("#username").val(),//psw:$("#psw").val()// }//   var jsonObj=$("#form1").serialize();          $.post("get.jsp",jsonObj,function(data,textStatus){             //alert(data);               $("#one").text(data); });    });   });

3.$.load的方式加载页面:

<script type="text/javascript" src="./jquery-1.7.2.min.js"></script><script> $(document).ready(function(){  $("#btn").click(function(){   $("#display").load("http://localhost:8080/TestALoad/servlet/TestServlet?date=" + new Date().getTime(),function(responseText,textStatus){   // $("#display").append("<hr>responseText:"+responseText);    //$("#display").append("<hr>textStatus:"+textStatus);   });    });  $("#btn2").click(function(){   $("#display").load("http://localhost:8080/TestALoad/servlet/TestServlet2?date=" + new Date().getTime(),function(responseText,textStatus){   // $("#display").append("<hr>responseText:"+responseText);    //$("#display").append("<hr>textStatus:"+textStatus);   });    }); });</script>

html页面:

<body><span id="btn">测试1</span><span id="btn2">测试2</span><h2>显示的内容如下：</h2><div id="result"></div><h2>结果：</h2><div id="display"></div></body>

servlet页面:

<pre name="code" class="java"> protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    System.out.println("2");        request.setAttribute("userName", "中国人民银行");        request.getRequestDispatcher("/index2.jsp").forward(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    doGet(request, response);}

index2.jsp页面:

<body>    呵呵的名是:${userName } <br>  </body>

controller层返回数据的页面依靠的是 out.

0 0