2
jQuery操作json数据给form表单赋值 - Java Tour - BlogJava
source link: http://www.blogjava.net/sol/archive/2023/03/04/450968.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
jQuery操作json数据给form表单赋值
页面表单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css">
<link rel="stylesheet" th:href="@{/css/bootstrap-table.min.css}" href="/css/bootstrap-table.min.css">
<script th:src="@{/js/jquery-3.6.3.min.js}" src="/js/jquery-3.6.3.min.js"></script>
<script th:src="@{/js/bootstrap.min.js}" src="/js/bootstrap.min.js"></script>
<script th:src="@{/js/bootstrap-table.min.js}" src="/js/bootstrap-table.min.js"></script>
<script th:src="@{/js/bootstrap-table-zh-CN.min.js}" src="/js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<form id="form" action="" method="post" class="default">
<input type="text" id="area" readOnly/>
<input type="text" id="name"/>
<select id="type" >
<option value="1">门店</option>
<option value="2">总部</option>
</select>
<textarea class="easyui-validatebox" name="remark" cols="40" rows="5" required="false"></textarea>
<button type="button" id="test" >提交 </button>
</form>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css">
<link rel="stylesheet" th:href="@{/css/bootstrap-table.min.css}" href="/css/bootstrap-table.min.css">
<script th:src="@{/js/jquery-3.6.3.min.js}" src="/js/jquery-3.6.3.min.js"></script>
<script th:src="@{/js/bootstrap.min.js}" src="/js/bootstrap.min.js"></script>
<script th:src="@{/js/bootstrap-table.min.js}" src="/js/bootstrap-table.min.js"></script>
<script th:src="@{/js/bootstrap-table-zh-CN.min.js}" src="/js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<form id="form" action="" method="post" class="default">
<input type="text" id="area" readOnly/>
<input type="text" id="name"/>
<select id="type" >
<option value="1">门店</option>
<option value="2">总部</option>
</select>
<textarea class="easyui-validatebox" name="remark" cols="40" rows="5" required="false"></textarea>
<button type="button" id="test" >提交 </button>
</form>
</body>
页面调用:
<script>
$('#test').click(function(){
let bookParam = {"id":"111","sex":"1"};
ajaxInSameDomain("getData.do", bookParam, "POST", function(result){
let parseJSON = $.parseJSON(result);
console.log("result :{0}",parseJSON)
let ok =parseJSON.success;
if(ok){
alert(parseJSON.message);
loadDataById(result);
}else{
console.log("parseJSON:{}",parseJSON);
}
});
// console.log("bookParam{}",bookParam)
});
</script>
$('#test').click(function(){
let bookParam = {"id":"111","sex":"1"};
ajaxInSameDomain("getData.do", bookParam, "POST", function(result){
let parseJSON = $.parseJSON(result);
console.log("result :{0}",parseJSON)
let ok =parseJSON.success;
if(ok){
alert(parseJSON.message);
loadDataById(result);
}else{
console.log("parseJSON:{}",parseJSON);
}
});
// console.log("bookParam{}",bookParam)
});
</script>
jQuery
function ajaxJsonInSameDomain(url, param, method, success, error, config) {
$.ajax({
url: url,
data: param,
type: method,
dataType: "json",
contentType: "application/json;charset=utf-8",
cache: false,
error: error,
success: function (result) {
if (result.success) {
const requestAgain = function () {
ajaxJsonInSameDomain(url, param, method, success, error, config);
};
}
success(result);
}
});
}
$.ajax({
url: url,
data: param,
type: method,
dataType: "json",
contentType: "application/json;charset=utf-8",
cache: false,
error: error,
success: function (result) {
if (result.success) {
const requestAgain = function () {
ajaxJsonInSameDomain(url, param, method, success, error, config);
};
}
success(result);
}
});
}
function ajaxInSameDomain(url, param, method, success, error, config) {
$.ajax({
url: url,
data: param,
type: method,
cache: false,
error: error,
success: function (result) {
if (result.success) {
const requestAgain = function () {
ajaxInSameDomain(url, param, method, success, error, config);
};
}
success(result);
}
});
}
$.ajax({
url: url,
data: param,
type: method,
cache: false,
error: error,
success: function (result) {
if (result.success) {
const requestAgain = function () {
ajaxInSameDomain(url, param, method, success, error, config);
};
}
success(result);
}
});
}
function loadDataById(jsonStr){
const obj = eval("(" + jsonStr + ")");
let key, value, tagName, type, arr;
for(const x in obj){
key = x;
value = obj[x];
$("[id='"+key+"'],[id='"+key+"[]']").each(function(){
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if(tagName==='INPUT'){
if(type==='radio'){
$(this).attr('checked',$(this).val()===value);
}else if(type==='checkbox'){
arr = value.split(',');
for(let i =0; i<arr.length; i++){
if($(this).val()===arr[i]){
$(this).attr('checked',true);
break;
}
}
}else{
$(this).val(value);
}
}else if(tagName==='SELECT' || tagName==='TEXTAREA'){
$(this).val(value);
}
});
}
}
后台const obj = eval("(" + jsonStr + ")");
let key, value, tagName, type, arr;
for(const x in obj){
key = x;
value = obj[x];
$("[id='"+key+"'],[id='"+key+"[]']").each(function(){
tagName = $(this)[0].tagName;
type = $(this).attr('type');
if(tagName==='INPUT'){
if(type==='radio'){
$(this).attr('checked',$(this).val()===value);
}else if(type==='checkbox'){
arr = value.split(',');
for(let i =0; i<arr.length; i++){
if($(this).val()===arr[i]){
$(this).attr('checked',true);
break;
}
}
}else{
$(this).val(value);
}
}else if(tagName==='SELECT' || tagName==='TEXTAREA'){
$(this).val(value);
}
});
}
}
import java.util.List;
import java.util.Map;
import com.example.bootstrap.DemoVo;
import com.example.bootstrap.JSONUtil;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* bootstrap-table练习demo
*
*/
@RestController
public class IndexController {
/**
* 列表页初始化
* @return
*
*/
@GetMapping("/index")
public ModelAndView index(){
return new ModelAndView("/test");
}
@RequestMapping(value = "/getData.do", produces = "text" +
"/html;charset=UTF-8")
@ResponseBody
public String getData(){
DemoVo vo =new DemoVo();
vo.setArea("亚洲地区");
vo.setName("上海");
vo.setType("2");
vo.setSuccess(true);
vo.setRemark("今天天气不错");
vo.setMessage("加载成功");
//JSON.toJSONString(object);
return JSONUtil.toJSONString(vo);
}
}
Voimport java.util.Map;
import com.example.bootstrap.DemoVo;
import com.example.bootstrap.JSONUtil;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* bootstrap-table练习demo
*
*/
@RestController
public class IndexController {
/**
* 列表页初始化
* @return
*
*/
@GetMapping("/index")
public ModelAndView index(){
return new ModelAndView("/test");
}
@RequestMapping(value = "/getData.do", produces = "text" +
"/html;charset=UTF-8")
@ResponseBody
public String getData(){
DemoVo vo =new DemoVo();
vo.setArea("亚洲地区");
vo.setName("上海");
vo.setType("2");
vo.setSuccess(true);
vo.setRemark("今天天气不错");
vo.setMessage("加载成功");
//JSON.toJSONString(object);
return JSONUtil.toJSONString(vo);
}
}
package com.example.bootstrap;
import org.apache.commons.lang3.builder.ToStringBuilder;
public class DemoVo {
private String area;
private String name;
private String type;
private String remark;
private boolean success;
private String message;
public String getArea() {
return area;
}
public void setArea(String area) {
this.area = area;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@Override
public String toString() {
return ToStringBuilder.reflectionToString(this);
}
}
pom.xmlimport org.apache.commons.lang3.builder.ToStringBuilder;
public class DemoVo {
private String area;
private String name;
private String type;
private String remark;
private boolean success;
private String message;
public String getArea() {
return area;
}
public void setArea(String area) {
this.area = area;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@Override
public String toString() {
return ToStringBuilder.reflectionToString(this);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.0.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>Bootstrap</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Bootstrap</name>
<description>Bootstrap</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<!--
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-batch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis-reactive</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-quartz</artifactId>
</dependency>
-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--
<dependency>
<groupId>org.apache.kafka</groupId>
<artifactId>kafka-streams</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.kafka</groupId>
<artifactId>spring-kafka</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.batch</groupId>
<artifactId>spring-batch-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.kafka</groupId>
<artifactId>spring-kafka-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.projectreactor</groupId>
<artifactId>reactor-test</artifactId>
<scope>test</scope>
</dependency>
-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.11</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.4</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.83</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.7</version>
</dependency>
<!--添加一个webjar jquery 3.5.1-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.2</version>
</dependency>
<!--引入bootstrap 3.4.1-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.2.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.0.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>Bootstrap</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Bootstrap</name>
<description>Bootstrap</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<!--
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-batch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis-reactive</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-quartz</artifactId>
</dependency>
-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--
<dependency>
<groupId>org.apache.kafka</groupId>
<artifactId>kafka-streams</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.kafka</groupId>
<artifactId>spring-kafka</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.batch</groupId>
<artifactId>spring-batch-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.kafka</groupId>
<artifactId>spring-kafka-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.projectreactor</groupId>
<artifactId>reactor-test</artifactId>
<scope>test</scope>
</dependency>
-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.11</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.4</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.83</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.7</version>
</dependency>
<!--添加一个webjar jquery 3.5.1-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.2</version>
</dependency>
<!--引入bootstrap 3.4.1-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.2.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK