Java Tour

 

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>


posted on 2023-03-04 01:58 花滿樓 阅读(48) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿

随笔档案

友情链接

搜索

最新评论

阅读排行榜

评论排行榜