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 花滿樓 閱讀(61) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           

          導航

          統計

          常用鏈接

          留言簿

          隨筆檔案

          友情鏈接

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 廊坊市| 同江市| 察雅县| 通化市| 屯门区| 高陵县| 武清区| 东宁县| 浦城县| 庐江县| 泰兴市| 绩溪县| 太谷县| 巴里| 龙南县| 内黄县| 凉城县| 榆树市| 定日县| 屯昌县| 三门峡市| 庐江县| 基隆市| 冷水江市| 富锦市| 剑川县| 沭阳县| 元阳县| 辽宁省| 甘谷县| 喀喇沁旗| 曲水县| 凤山市| 杨浦区| 江达县| 晴隆县| 革吉县| 六枝特区| 江孜县| 霍城县| 昭苏县|