jquery的ajax的使用！

- 日理万妓 2022-08-02 06:11 141阅读 0赞

<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)
    	@ResponseBody
    	public 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 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关【Ajax】jQuery中Ajax的使用

【Ajax】jQuery Ajax的使用简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从

╰+攻爆jí腚メ/ 2023年10月08日 15:17/ 0 赞/ 49 阅读

相关 jquery ajax删除_使用jQuery的动画AJAX记录删除

jquery ajax删除 I'm a huge fan of WordPress' method of individual article deletion. You c

小灰灰/ 2023年02月22日 01:19/ 0 赞/ 20 阅读

相关 Ajax & Jquery的使用

Ajax & Jquery Ajax Ajax是什么? Asynchronous Javascript And XML（异步JavaScript和XML）并不

蔚落/ 2022年11月30日 12:50/ 0 赞/ 182 阅读

相关 jQuery中 ajax的使用

文章目录 jQuery 中的 ajax 1. $.ajax 常用选项参数介绍： 2. $.get 3.

朱雀/ 2022年11月15日 11:53/ 0 赞/ 197 阅读

相关 jquery框架的ajax,原生ajax和jquery框架ajax的使用

创建一个异步调用对象，XMLHttpRequest 创建一个新的 HTTP 请求，并且指定方法，url 及参数等(XMLHttpRequest.open(‘GET/POST’

我不是女神ヾ/ 2022年09月03日 11:17/ 0 赞/ 214 阅读

相关 jquery的ajax的使用！

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 2

- 日理万妓/ 2022年08月02日 06:11/ 0 赞/ 142 阅读

相关 Jquery+AJAX的结合使用

1 调用方式 $.ajax( \{ type: "POST", url: "serverlet",

旧城等待，/ 2022年06月10日 08:09/ 0 赞/ 247 阅读

相关 Jquery Ajax的使用

Ajax概述 Ajax就是通过 HTTP 请求加载远程数据。通常用于定制一些http请求来灵活的完成前端与后端的数据交互需求。注意，所有的选项都可以通过$.ajaxS

灰太狼/ 2022年05月26日 02:29/ 0 赞/ 243 阅读

相关 jquery的ajax使用例子

异步的情况： $.ajax(\{ type:'post', url:'prepAddDonationReceivingGoods.

柔光的暖阳◎/ 2022年04月12日 06:36/ 0 赞/ 269 阅读

相关 jQuery封装Ajax，SpringMVC使用Ajax的配置

上一遍已经讲了使用原生js开发Ajax，熟悉其原理再来学jQuery封装好的就容易多了， Jquery中已经封装好$.ajax()方法，我们可以直接调用，具体的属性含义可以参

╰半夏微凉°/ 2021年11月23日 04:46/ 0 赞/ 358 阅读