〖後端/後端也須要會寫的一個javascript/AJAX III〗

時間 2019-12-29

標籤後端須要寫的一個 javascript ajax iii 欄目 JavaScript 简体版

原文原文鏈接

寫在前面:

文章將針對使用`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;
	}	
}
複製代碼