jQuery之ajax函数的一个小例子

来源：互联网发布：淘宝买的京东e卡假的编辑：程序博客网时间：2024/06/01 12:07

创建一个web项目，要有maven支持

这里我们就最简单化，没有service和dao层，只有一个controller层

pom.mxl

架包支持分别是 springmvc和json-lib

[html] view plain copy
    
   <!-- 加载springmvc架包 -->  
   <dependency>  
  <groupId>org.springframework</groupId>  
  <artifactId>spring-webmvc</artifactId>  
  <version>4.3.8.RELEASE</version>  
</dependency>  
     
   <!-- 加载json架包 -->  
   <dependency>  
  <groupId>net.sf.json-lib</groupId>  
  <artifactId>json-lib</artifactId>  
  <version>2.4</version>  
  <classifier>jdk15</classifier>  
</dependency>  

web.xml

web.xml只配置一个核心的过滤器，其它的不要

[html] view plain copy
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
      
    <servlet>  
        <servlet-name>springmvc</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
    </servlet>  
      
    <servlet-mapping>  
        <servlet-name>springmvc</servlet-name>  
        <url-pattern>*.do</url-pattern>  
    </servlet-mapping>  
      
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
      
    <login-config>  
        <auth-method>BASIC</auth-method>  
    </login-config>  
</web-app>  

ajax.xml

jQuery-2.2.4.js下载地址

[html] view plain copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>domevent.html</title>  
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
      
      
    <script type="text/javascript" src="jquery-2.2.4.js"></script>  
    <script type="text/javascript">  
          
        $(function(){  
            $("#query").click(function(){  
                //var ename=$("#ename").val();  
                //alert($("#myForm").serialize());  
                $.ajax({  
                    url:"../json.do",   //  表示请求的路径  
                    dataType:'json',    // 表示响应的数据类型 json的方式传参  
                    //data:{ename:ename},   //  ajax的传参  
                    /*  
                        $("#myForm").serialize()会把 form表单里面所有带有name属性的input  
                        转换为  name=value&name=value&name=value  
                        例：eno=1234&ename=JAMES&sal=5000  
                    */  
                    data:$("#myForm").serialize(),  
                    type:"GET",         // 请求的试  
                    /*  
                    (默认: true) 默认设置下，所有请求均为异步请求。  
                    如果需要发送同步请求，请将此选项设置为 false。  
                    注意，同步请求将锁住浏览器，一次只能执行一个线程，  
                    用户其它操作必须等待请求完成才可以执行。  
                    */  
                    async:false,  
                    success:function(json){  
                        $("tr[mark=1]").remove();  
                        //参数就是返回到json  
                        $("#myTable").append("<tr mark=1><td>"+json.eno+"</td><td>"+json.ename+"</td><td>"+json.sal+"</td></tr>");  
                    },  
                    /*异常的处理*/  
                    error:function(XMLHttpRequest, textStatus, errorThrown){  
                        alert("调用服务器失败--"+XMLHttpRequest.status+"--"+errorThrown);  
                    }  
                });  
            });  
              
        })  
    </script>  
  </head>  
    
  <body>  
        <table id="myTable" border="1" style="border:1px solid black;width:400px">  
            <tr>  
                <th>编号</th>  
                <th>姓名</th>  
                <th>薪水</th>  
            </tr>  
        </table>  
          
        <form id="myForm">  
            <input  name="eno" type="text" value="1234" /><br/>  
            <input id="ename"  name="ename" type="text" value="JAMES" /><br/>  
            <input  name="sal" type="text" value="5000" /><br/>  
        </form>  
        <input id="query" type="button" value="查询" />  
          
          
  </body>  
</html>  

Action类

[java] view plain copy
package cn.et.jquery.controller;  
  
import java.io.IOException;  
import java.io.OutputStream;  
import java.io.UnsupportedEncodingException;  
  
  
import net.sf.json.JSONObject;  
  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
  
@Controller  
public class JsonAction {  
  
    @RequestMapping("json")  
    public void action(String eno,String ename,String sal,OutputStream os) throws UnsupportedEncodingException, IOException{  
        Emp emp = new Emp();  
        emp.setEno("1234");  
        emp.setEname(ename);  
        emp.setSal("6000");  
        os.write(JSONObject.fromObject(emp).toString().getBytes("UTF-8"));  
    }  
}  

Emp实体类

[java] view plain copy
package cn.et.jquery.controller;  
  
  
/** 
 * Emp entity. @author MyEclipse Persistence Tools 
 */  
  
public class Emp implements java.io.Serializable {  
  
  
    private String eno;  
    private String ename;  
    private String sal;  
      
      
    public String getEno() {  
        return eno;  
    }  
    public void setEno(String eno) {  
        this.eno = eno;  
    }  
    public String getEname() {  
        return ename;  
    }  
    public void setEname(String ename) {  
        this.ename = ename;  
    }  
    public String getSal() {  
        return sal;  
    }  
    public void setSal(String sal) {  
        this.sal = sal;  
    }  
    @Override  
    public String toString() {  
        return "Emp [ename=" + ename + ", eno=" + eno + ", sal=" + sal + "]";  
    }  
      
}  

架包支持

web.xml只配置一个核心的过滤器，其它的不要

阅读全文

0 0