jQuery之ajax函数的一个小例子

最新推荐文章于 2022-04-16 10:36:07 发布

Sesshoumaru华

最新推荐文章于 2022-04-16 10:36:07 发布

阅读量684

点赞数

分类专栏： jQuery 文章标签： jQuery之ajax函数的一个小例子

本文链接：https://blog.csdn.net/qq_38921377/article/details/73864313

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

pom.mxl

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

   
    <!-- 加载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只配置一个核心的过滤器，其它的不要

<?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下载地址

<!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类

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实体类

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只配置一个核心的过滤器，其它的不要