jQuery数据提交

最新推荐文章于 2024-09-08 21:45:17 发布

可乐沙司

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量828

点赞数

分类专栏：笔记 jQuery的学习文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_49756092/article/details/119410462

版权

笔记同时被 2 个专栏收录

33 篇文章

订阅专栏

jQuery的学习

3 篇文章

订阅专栏

本文介绍了使用jQuery进行数据获取和提交的各种方法，包括$.ajax、$.get、$.post和$.getJSON等，通过实例详细讲解了如何从控制器获取数据以及如何将视图中的表单数据提交到控制器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在此之前我们学习了js数据获取和提交，现在我们就用JQuery来实现数据的获取和提交，首先我们看一下jQuery里面的方法：

我们先看这四个方法，也是最简单的。

拿一个小案例来作解释吧：

这是一个拥有10个按钮的表单样式，每一个按钮都有它自己的功能。

页面输出：

这十个按钮分别给他们绑定了一个点击事件：

这十个按钮的功能中，左边四个按钮都是获取数据的，右边六个按钮都是提交的，所以十个按钮只有两个功能，那就是获取和提交。

1.从控制器中获取数据:

（1）$("#btnAjaxGetData").click(function () {

//ajax获取数据

$.ajax({

type: "post",//可以get 可以post

url: "/Ajax/strData",

dataType:'json',//返回JSON数据 js对象

success: function (data) {

$("#txtName").val(data.name);

$("#cboSex").val(data.sex);

$("#txtDax").val(data.dax);

$("#txtAddress").val(data.address);

error: function (data) {

alert("发生错误");

}

});

和下面这个相比，上面的事件中多了（dataType:'json',）返回JSON数据也就是js对象，所以就不用像下面这个这样转换再用，直接用就可以了

Type：获取数据的方式；

Url：获取数据的路径；

dataType：返回数据的格式；

Success：回调函数；

（2）$("#btnAjaxGetData").click(function () {

//ajax获取数据

$.ajax({

type: "post",//可以get 可以post

url: "/Ajax/strData",

success: function (data) {

console.log(data);

//返回回来的data是一个json格式的字符串

data = JSON.parse(data);

//JSON.parse(data) 将json格式的字符串转换成js对象 data js对象

console.log(data);

$("#txtName").val(data.name);

$("#cboSex").val(data.sex);

$("#txtDax").val(data.dax);

$("#txtAddress").val(data.address);

error: function (data) {

alert("发生错误");

}

});

})

两个功能一样的，就是方式不一样而已。

Type：获取数据的方式；

Url：获取数据的路径；

2.将视图的表单数据提交到控制器中

$("#btnAjaxPostData").click(function () {

var name = $("#txtName").val();

var sex = $("#cboSex").val();

var dax = $("#txtDax").val();

var address = $("#txtAddress").val();

var strData = "txtname=" + name + "&txtsex=" + sex + "&txtdax=" + dax + "&txtaddress=" + address;

$.ajax({

type: "post",

url: "/Ajax/jqAjaxData",

data:strData,

success: function (txt) {

console.log(txt);

}

});

Type：获取数据的方式；

Url：获取数据的路径；

Data：数据的字符串拼接

3.将视图的表单数据序列化提交到控制器中

$("#btnAjaxPostData2").click(function () {

var strData = $("#frm").serialize();

//console.log(strData);

//var arrayData = $("#frm").serializeArray();

//console.log(arrayData);

$.ajax({

type: "post",

url: "/Ajax/getDataByEntityClass",

data: strData,

//dataType:'json',

success: function (txt) {

console.log(txt);

}

});

var strData = $("#frm").serialize();表单数据序列化

var arrayData = $("#frm").serializeArray();表单数据序列化

4.通过$.get()方法从控制器中获取数据

$("#btnGetData1").click(function () {

$.get("/Ajax/strData", function (data) {

//console.log(data);

var person = JSON.parse(data);

//console.log(person);

$("#txtName").val(person.name);

$("#cboSex").val(person.sex);

$("#txtDax").val(person.dax);

$("#txtAddress").val(person.address);

});

data：控制器中strData方法返回的一个json格式的字符串

JSON.parse(json格式的字符串)：转换为js对象

5.通过$.get()方法将视图中的form表单数据提交到控制器的方法中

$("#btnGetData2").click(function () {

var txtName = $("#txtName").val();

var txtSex = $("#cboSex").val();

var txtDax = $("#txtDax").val();

var txtAddress = $("#txtAddress").val();

$.get("/Ajax/receiveData", {

name: txtName,

sex: txtSex,

dax: txtDax,

address: txtAddress,

}, function (txt) {

console.log(txt);

});

6.通过$.post()方法从控制器中获取数据

$("#btnPostData1").click(function () {

$.post("/Ajax/strData", function (data) {

//data 控制器中PersonData方法返回的一个json格式的字符串

//console.log(data);

//JSON.parse(json格式的字符串) 转换为js对象

var person = JSON.parse(data);

//console.log(person);

$("#txtName").val(person.name);

$("#cboSex").val(person.sex);

$("#txtDax").val(person.dax);

$("#txtAddress").val(person.address);

});

7.通过$.post()方法将视图中的form表单数据提交到控制器的方法中

$("#btnPostData2").click(function () {

var txtName = $("#txtName").val();

var txtSex = $("#cboSex").val();

var txtDax = $("#txtDax").val();

var txtAddress = $("#txtAddress").val();

$.post("/Ajax/receiveData", {

name: txtName,

sex: txtSex,

dax: txtDax,

address: txtAddress,

}, function (txt) {

console.log(txt);

});

8.通过$.post()方法将视图中的form表单数据序列化提交到控制器的方法中

$("#btnPostData3").click(function () {

var formData = $("#frm").serializeArray();

$.post("/Ajax/receiveData", formData, function (msg) {

console.log(msg);

});

9.通过$.getJSON()方法从控制器中获取数据

$("#btngetJSON1").click(function () {

$.getJSON("/Ajax/strData", function (data) {

//console.log(data);

$("#txtName").val(data.name);

$("#cboSex").val(data.sex);

$("#txtDax").val(data.dax);

$("#txtAddress").val(data.address);

});

10.通过$.getJSON()方法将视图中的form表单数据序列化提交到控制器的方法中

$("#btngetJSON2").click(function () {

var formData = $("#frm").serializeArray();

$.getJSON("/Ajax/receiveData", formData, function (msg) {

console.log(msg);

});

这些方法无为就两个功能，一个获取，一个提交：

点击左边的蓝色按钮就是获取数据的：

这四个按钮都是一个功能，数据来源都是控制器的strData方法的数据：

右边六个按钮都是把视图的数据提交到控制台中，有两个序列化提交：

下面每一个按钮的输出都是一一对应的：

总结：

$.ajax({

Type：获取数据的方式；

Url：获取数据的路径；

dataType：返回数据的格式；

Success：回调函数；

})

$.get(“url”,{对象},function(){函数});
$.post(“url”,{对象},function(){函数});
$.getJSON(“url”,{对象},function(){函数});