jQuery·调用接口数据

青鸟遇鱼

已于 2023-03-28 14:02:54 修改

阅读量4.2k

点赞数

分类专栏： S1-DD-前端文章标签： jquery java ajax

于 2022-06-18 00:12:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43308318/article/details/125341767

版权

S1-DD-前端专栏收录该内容

12 篇文章

订阅专栏

jQuery·调用接口数据

定义接口

package com.rxld.rxld_kettle;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;

@RestController
public class ajax {
    @CrossOrigin(origins = "*",maxAge = 3600)  // 解决跨域问题
    @RequestMapping(value = "/ajax", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public Cust ajax(@RequestBody Cust dot){
        Cust cust = new Cust();
        cust.setId(dot.getId());
        cust.setName(dot.getName());
        System.out.println("插入成功:"+cust);
        return dot ;
    }

        @CrossOrigin(origins = "*",maxAge = 3600)  // 解决跨域问题
        @RequestMapping(value = "/ajaxget", method = RequestMethod.GET )
        public Cust ajax(){
            Cust stu = new Cust();
            stu.setId("12121");
            stu.setName("get请求111");
            System.out.println("赋值结果："+stu.toString());
            return stu ;
        }
}

实例化类

package com.rxld.rxld_kettle;

public class Cust {

    String id;
    String name;

    @Override
    public String toString() {
        return "Cust{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                '}';
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

前端页面

<html>
<body>
<!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<button onclick="login0()">发送0</button>
<form id="s11" > 表单数据发送到后台
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交"  onclick="login2()">
</form>
<button onclick="login2()">发送2-表单数据提交到服务器 </button>

<button onclick="login2()">发送2</button>
<button onclick="login3()">发送3</button>
<button onclick="login4()">发送4</button>
<button onclick="login5()">发送5</button>
<button onclick="login6()">发送6</button>
<button onclick="login7()">发送7</button>
<button onclick="login8()">发送8</button>
<button onclick="login9()">发送9</button>
<div id="ret"></div>


<p id="demo">引用js变量中的数据</p>
<p id = "myForm">这是一个标签数据</p>

<script type="text/javascript">

// 从标签中获取数据
function login0() { 
    // 获取标签内容
    var dd =  document.getElementById("myForm")  ;
    alert(dd.innerHTML);         // 弹窗显示
    console.log(dd.innerHTML);   // 控制台显示

    //获取表单的值
    var form1 =  s11.fname.value ;
    alert(form1 );         // 弹窗显示
    console.log("表单的值："+form1 );   // 控制台显示

}

// 从js变量中获取数据引用到指定的标签上
function login1() {  // 使用post请求给后台发送数据 方法1
    var data_d={"id": "123","name": 'jenny'};
    document.getElementById("demo").innerHTML = data_d.id +"&&&"+data_d.name; 
}

 
// 从页面获取数据加载到服务器中
function login2() {  // 使用post请求给后台发送数据 方法1
    
    // 获取表单数据
    var vid = s11.fname.value;
    var vname = s11.lname.value;
    var data_d={"id": vid,"name": vname};

    $.ajax({
        url: "http://localhost:8080/ajax",
        // data: JSON.stringify({"id": "123","name": 'jenny'}),  // 将数据转为json格式
        data: JSON.stringify(data_d),  // 将数据转为json格式-这里的数据会默认提交到post请求接口
        type: "POST",
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        
        success:function(data,status){   // 注意这里没有返回值，应该是服务端的接口返回值一致导致，post返回值应为对象类型
            console.log("数据：" + data + "\n状态：" + status);
        }
    });
    
}
 
function login4() { // 使用post请求给后台发送数据 方法2
$.ajax({
         type: 'POST',
         url: "http://localhost:8080/ajax ",
         dataType: 'json',
         cache: false,          // 异步请求时false
         headers : {
               'Content-Type' : 'application/json;charset=utf-8'
        },
        data: JSON.stringify( {"id": "123","name": 'jenny'}),
        success:function(data,status){
            alert("数据：" + data + "\n状态：" + status);
        }
});

}


// 从服务器货期数据
function login5() { // 使用get请求获取后台数据
$.ajax({
         type: 'GET',
         url: "http://localhost:8080/ajaxget",
         dataType: 'json',
         cache: false,
         contentType: "application/json;charset=utf-8",
         success:function(data,status){
            alert("数据：" + data + "\n状态：" + status);
        }
        });
}

 
function login6() { 
    $.ajax({
        url: "http://localhost:8080/ajaxget",
        type:'get',
        dataType:'json',
        success: function(data,status){
            //方法中传入的参数data为后台获取的数据
            alert("数据：" + data.id + "\n状态：" + status);
        }
    })
}


// $("button").click(function(){
//   $.post("http://localhost:8080/ajax",
//   {
//     name:"Donald Duck",
//     city:"Duckburg"
//   },

//   function(data,status){
//     alert("Data: " + data + "\nStatus: " + status);
//   });
// });

</script>
</body>
</html>