JQuery开发详解(一)

来源：互联网发布：淘宝培训班多少钱编辑：程序博客网时间：2024/05/29 03:21

关于JQuery的Ajax操作方式有三种,规范之前的JQuery操作
1.$.ajax

<%@ 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>Ajax原生函数</title><script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery-1.11.2.min.js"></script><script type="text/javascript">     $(function(){              $("#sendBtn").on("click",function(){                     var msgValue=$("#msg").val()   ;    //取得信息                       $.ajax({                             url : "EchoServlet"  ,                      //Ajax提交路径                             data : {                                             //传递的参数                                 "msg" : msgValue ,                                 "eid"   : 666    ,                                 "time" : new Date()                               }    ,                             type : "post"   ,                           //发送类型                             dataType : "json"   ,                  //返回值类型,                             success : function(json){     //回调函数                                  $("#contentDiv").append("<p>姓名:"+json.members[0].name+",年龄:"+json.members[0].age+"</p>")  ;                             }   ,                             error :function(){    //异常处理函数                                    alert("对不起,操作出现了异常,无法连接!");                             }                     });              })   ;     });</script></head><body>     请输入内容:<input type="text" name="msg" id="msg">        <input type="button" value="发送" id="sendBtn">        <div id="contentDiv"></div></body></html>

2.$.post

<%@ 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>POST简化Ajax操作</title><script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery-1.11.2.min.js"></script><script type="text/javascript">     $(function(){              $("#sendBtn").on("click",function(){                     var msgValue=$("#msg").val()   ;    //取得信息                      $.post("EchoServlet",{"msg":msgValue,"eid":888,"time":new Date()},function(json){                         $("#contentDiv").append("<p>姓名:"+json.members[0].name+",年龄:"+json.members[0].age+"</p>")  ;                    },"json");                }  );     });</script></head><body>     请输入内容:<input type="text" name="msg" id="msg">        <input type="button" value="发送" id="sendBtn">        <div id="contentDiv"></div></body></html>

3.$.get
因为操作和POST请求差不多,就不在过多解释

Servlet代码

package cn.zzu.wcj.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet(urlPatterns="/EchoServlet")public class EchoServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    @Override    public void doGet(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {         //请求和响应都要设置编码才能解决乱码            req.setCharacterEncoding("UTF-8") ;           resp.setCharacterEncoding("UTF-8");           resp.setContentType("text/html");           System.out.println("msg="+req.getParameter("msg"));           System.out.println("eid="+req.getParameter("eid"));           resp.getWriter().print("{\"members\":[{\"name\":\"张三\",\"age\":\"30\"}]}");    }    @Override    public void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {            this.doGet(req, resp);    }}

总结:强烈建议使用.ajax的形式,这种形式最全面,而Bootstrap插件也支持这种形式,如果开发团队要求不是很严格,可以使用.post/get

0 0