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

来源：互联网发布：csi网络犯罪调查第二季编辑：程序博客网时间：2024/05/20 20:01

前面展示了基本的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" onclick="ajaxGETMethod()" value="ajax1点击"><div id="ajax1">111</div><input type="button" onclick="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>

阅读全文

1 0