AJAX第四步：AJAX使用jquery一步到位。

最新推荐文章于 2021-08-05 21:59:24 发布

IT界小黑的对象

最新推荐文章于 2021-08-05 21:59:24 发布

阅读量262

点赞数 1

分类专栏： java_web java_ajax 文章标签： jquery ajax 局部刷新 json遍历

本文链接：https://blog.csdn.net/zxc_helloworld/article/details/77855314

版权

java_web 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

java_ajax

6 篇文章 0 订阅

订阅专栏

前面展示了基本的ajax用法，下面我将使用jquery来使用ajax进行局部刷新。

servlet代码：

package cn.sdut.ajaxdemo;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

@WebServlet("/JqueryAjaxDemo")
public class JqueryAjaxDemo extends HttpServlet {
	private static final long serialVersionUID = 1L;
   
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		      //设置编码 使中文不乱码
				response.setContentType("text/html;charset=utf-8");
				//获得请求消息
				String cmd = request.getParameter("cmd");
				System.out.println(cmd);
				String id = request.getParameter("id");
				System.out.println(id);
				String name = request.getParameter("name");
				System.out.println(name);
				//响应
				response.getWriter().write(cmd+"  "+id+"   "+name);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		List<User> list = new ArrayList<>();
		
		list.add(new User(1,"zxc",1));
		list.add(new User(2,"dnn",2));
		
		JSONArray json = JSONArray.fromObject(list);
		System.out.println(json.toString());
		response.getWriter().write(json.toString());
	}

}

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jquery中的ajax接收 content=text/HTML 的 字符串文本</title>
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<input type="button" οnclick="ajaxGETMethod()" value="ajax1点击"><div id="ajax1">111</div>
<input type="button" οnclick="ajaxPOSTMethod()" value="ajax2点击"><div id="ajax2">222</div>
<div id="ajax3"></div>
<div id="ajax4"></div>
</body>

<!-- 使用jquery的ajax 接收字符串 -->
<script type="text/javascript">
function ajaxGETMethod(){
	$.ajax({
		type : "get",    //设置请求方式 
		async : true,    //是否异步
		url : "${pageContext.request.contextPath}/JqueryAjaxDemo?cmd=jqueryGetAjax",  //设置地址和参数
		data : {"id" : 123 , "name" : "zxc"},  //传递参数
		error : function(){                    //出错处理
			alert('error');               
		},		
		success : function(result){            //成功请求处理   result为接收结果的参数
			document.getElementById("ajax1").innerHTML = result;
		}
	});
}
</script>
<!-- 使用jquery的ajax 接收集合   导jquery  -->
<script type="text/javascript">
function ajaxPOSTMethod(){
	$.ajax({
		type : "POST" ,
		async : true,
		url :"${pageContext.request.contextPath}/JqueryAjaxDemo",
		data : {"id" : 123 , "name" : "zxc"},  //传递参数
		dataType : "json",     //规定了返回类型   也可以不规定在 直接$.each($.parseJSON(result),function(id,json){});
		error : function(){alrt('error');},
		success : function(result){
			$.each(result,function(id,json){
				$("#ajax2").append(id+json.id+json.name+json.age);
				$("#ajax3").html("<h1>hello</h1>");
				$("#ajax4").text("<h1>hello</h1>");
			});
		}

	});
}
</script>
</html>

IT界小黑的对象

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX第四步：AJAX使用jquery一步到位。

前面展示了基本的ajax用法，下面我将使用jquery来使用ajax进行局部刷新。servlet代码：package cn.sdut.ajaxdemo;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;i
复制链接

扫一扫

专栏目录