2

jQuery操作json数据给form表单赋值 - Java Tour - BlogJava

 1 year ago
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.
neoserver,ios ssh client

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>
页面调用:
<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);
            }
        });
    }
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);
            }
        });
    }
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);
                }

});
        }
    }
后台
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);
    }
}
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.xml
<?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>

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK