jquery的ajax的使用！

最新推荐文章于 2024-09-02 08:16:43 发布

哈哈哈哈哈哈哈111

最新推荐文章于 2024-09-02 08:16:43 发布

阅读量1.8k

点赞数

分类专栏：前端技术文章标签： jquery ajax 表单 login spring mvc

本文链接：https://blog.csdn.net/u012572955/article/details/46858243

版权

前端技术专栏收录该内容

13 篇文章 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.

哈哈哈哈哈哈哈111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录