〖后端/后端也需要会写的一个javascript/AJAX III〗

写在前面:

文章将针对使用`ajax`异步提交处理页面的多选框数据

code

#### 项目结构:

D:\eclipse-workspace\jsonTest>tree /f
卷 软件卷 的文件夹 PATH 列表
卷序列号为 5009-1C6F
D:.
│  .classpath
│  .project
│
├─build
│  └─classes
│      └─com
│          ├─config
│          │      springmvc-servlet.xml
│          │
│          ├─controller
│          │      UserController.class
│          │
│          └─pojo
│                  User.class
│
├─src
│  └─com
│      ├─config
│      │      springmvc-servlet.xml
│      │
│      ├─controller
│      │      UserController.java
│      │
│      └─pojo
│              User.java
│
└─WebContent
    ├─META-INF
    │      MANIFEST.MF
    │
    ├─rs
    │  └─js
    │          jquery.js
    │
    └─WEB-INF
        │  web.xml
        │
        ├─jsp
        │      index.jsp
        │
        └─lib
                commons-logging-1.2.jar
                jackson-annotations-2.8.8.jar
                jackson-core-2.8.8.jar
                jackson-databind-2.8.8.jar
                spring-aop-4.3.6.RELEASE.jar
                spring-beans-4.3.6.RELEASE.jar
                spring-context-4.3.6.RELEASE.jar
                spring-core-4.3.6.RELEASE.jar
                spring-expression-4.3.6.RELEASE.jar
                spring-web-4.3.16.RELEASE.jar
                spring-webmvc-4.3.16.RELEASE.jar
index.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/rs/js/jquery.js"></script>
<script>
	function submit()
	{
		var name = $("#name").val();
		var sex = $('#sex:checked').val();	
		var city = $('#city:checked').val();
	
		var hobby = $('#hobby:checked');
		
		var hobbyarray = [];	//定义一个数组
		
		$.each(hobby, function(i, value){
			hobbyarray[i] = $(value).val();
		});
		
		
		console.log(name);									 //作调试用, 不计入实际功能
		console.log(JSON.stringify({name: name, sex: sex})); //作调试用, 不计入实际功能
		$.ajax
		(
			{
				url: "${pageContext.request.contextPath}/doSubmit",
				type: "post",
				data: JSON.stringify({name:name, sex:sex, city:city, hobby:hobbyarray}),
				contentType: "application/json;charset=UTF-8",				
				success:
					function(data)
					{
					
						if(data!=null)
						{
							alert("服务器返回: OK");
							$("body").append("<h1>提交的数据为: </h1><br/>").append(data.name+","+data.sex+","+data.city+","+data.hobby);
						}
						else
						{
							alert("服务器返回不OK");
						}
					},
				error:
					function(e)
				   {
						alert("error");
				   }  			
			}									
		);
	}
</script>
</head>
<body>
		<h1>AJAX提交</h1>
		<form>		
			姓名: <input type="text" name="name" id="name" name="name"><br/>
			性别: <input type="radio" id="sex" name="sex" value="男" ><input type="radio" id="sex" name="sex" value="女"><br/>	
			城市: <select>
					<option value="北京" id="city" selected="selected">北京</option>
					<option value="上海" id="city">上海</option>
					<option value="广州" id="city">广州</option>
					<option value="深圳" id="city">深圳</option>
				</select>	
				<br/>	
			兴趣爱好:
				<input name="hobby" type="checkbox" id="hobby" value="唱"><input name="hobby" type="checkbox" id="hobby" value="跳"><input name="hobby" type="checkbox" id="hobby" value="rap">rap
				<input name="hobby" type="checkbox" id="hobby" value="篮球">篮球<br/>
		</form>
		<br/>
		<button onclick="submit()">提交</button>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <!-- 配置servlet -->
  <servlet>
  	<servlet-name>springmvc</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  	<init-param>
  		<param-name>contextConfigLocation</param-name>
  		<param-value>classpath:com/config/springmvc-servlet.xml</param-value>
  	</init-param>
  </servlet>
  <servlet-mapping>
  	<servlet-name>springmvc</servlet-name>
  	<url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>
springmvc-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">
	<!-- 注册后端控制器 -->
	<context:component-scan base-package="com.controller"/>
	
	<!-- 注册视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/"/>
		<property name="suffix" value=".jsp"/>	
	</bean>
	
	<!-- 开启mvc注解驱动 -->
	<mvc:annotation-driven />
	<!-- 标注根目录下静态资源的访问路径, 避免给mvc拦截 -->
	<mvc:resources location="/rs/" mapping="/rs/**" />
	<!-- 
		/rs/** 表示该rs目录下的文件下下的所有文件
	 -->
</beans>
UserController.java
package com.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.pojo.User;
@Controller
public class UserController {
	
	@RequestMapping("index")
	public String toIndex() {
		return "index";
	}
	
	@RequestMapping("doSubmit")
	@ResponseBody
	public User doAjax(@RequestBody User user) {
		System.out.println("控制台输出收到来自AJAX的数据");
		System.out.println(user);
		return user;
	}
}
User.java
package com.pojo;
public class User {
	private String name;
	private String sex;
	private String city;
	private String[] hobby;	
	
	public String[] getHobby() {
		return hobby;
	}
	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
	public String getCity() {
		return city;
	}
	public void setCity(String city) {
		this.city = city;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}	
}

上面内容修改主要地方是

index.htmlPOJO

  1. 获取多选框之前, 声明一个数组
  2. 随之更新POJO, 声明一个数组
  3. 接着我们更新ajax的数据处理和success()事件.

接着我们访问测试:

  1. 访问测试:
  2. 填写并点击提交
  3. 检查数据是否处理返回

localhost:8888/jsonTest/index

图一

图二

图三

在过程中踩的坑
1.点击事件不起作用:

打开控制台检查网络请求状态:415媒体类型不匹配

于是检查js部分, 发现获取部分没有错,

转换部分: 原先使用的是hobby:hobby.

输出部分: 原先使用的也是data.hobyarray

这下知道了, ajax的基本语法

输出部分是 原先字段值:本地接收变量

输出部分是data.原先字段

2.区分js的数组声明和java的数组声明

js声明是var hobbyarray = [];

java声明是 private String[] hobby;

熟悉这些需要注意的地方就可以轻松地根据这些步骤获取页面的数据并使用提交ajax异步处理了

写在后面:

对比前面的输入框, 修改的部分依次是:
var_update

pojo_update

ajax_update

完结

本系列主要对在spingmvc使用`ajax`获取并绑定`json`数据作一个总结
以方便不熟悉js部分的后端学习者参考使用.

欢迎与你的更多交流

https://juejin.im/post/5dfb025cf265da33f718baed

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论