From表单获取与提交（2）

Meaning_of_sugar

于 2021-06-15 20:20:48 发布

阅读量432

点赞数

分类专栏：介绍与运用

本文链接：https://blog.youkuaiyun.com/Meaning_of_sugar/article/details/117932410

版权

介绍与运用专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用jQuery的$.ajax()、$.get()和$.post()方法来实现异步获取和提交表单数据。通过绑定点击事件，获取并显示控制器返回的JSON数据，以及将表单数据序列化后提交到控制器。详细展示了相关代码示例。

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

通过jQuery里面的$.ajax({ })方法实现异步

先获取代码中预先设定好的ID，通过给ID绑定一个click的点击事件，在click()里面传入一个回调函数function()

使用$.ajax({})方法，$.ajax里的配置项都是以键值对的形式存在的，使用type指定get方法(或post方法)请求数据，用url确定数据提交的方式跟地址，使用dataType将数据转换为json格式，再使用success创建一个回调函数，通过回调函数中的数据去接收get方法请求的数据，当数据获取到时，将数据绑定到表单

当获取数据失败时，使用error创建一个回调函数，输出一个readState的值

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

和上面一样，通过给ID绑定一个click的点击事件，在click()里面传入一个回调函数function()；在发送表单提交的请求之前，先把表单上填写的数据获取到；

怎么获取表单上填写的数据？

创建个变量获取表单上的数据，将获取到的数据进行拼接，之后通过$.ajax进行请求提交需要提交的数据；type指定get方法(或post方法)请求数据，用url确定数据提交的方式跟地址，需要提交数据用data属性，最后使用success进行输出

下面是完整的代码：

控制器中的代码：

HTML中的代码：

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>jqAjaxPage</title>

</head>

<body>

</div>

</select>

</div>

</div>

</div>

</form>

</div>

//从控制器中获取数据

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

$.ajax({

type: "get",

url: "/Ajax/PersonData",

dataType: 'json',

success: function (data) {

console.log(data);

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

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

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

}

})

});

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

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

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

console.log(strData);

$.ajax({

type: "get",

url: "/Ajax/getDataByEntityClass",

data: strData,

success: function (give) {

console.log(give);

}

});

</script>

</body>

</html>

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

url：待载入页面的URL地址；data：待发送Key/value参数；callback：载入成功时回调函数；type是返回内容格式，xml，html，script，json，text，_default。

给ID绑定点击事件，使用get()方法获取绑定数据，创建一个function的函数，在function的函数中传入一个data的参数，接收返回的数据；

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

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

之后将数据绑定在页面元素上面

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

给button按钮绑定点击事件

获取视图中的数据

通过实体类接受视图传递过来的数据

然后通过get()方法获取传递过来的数据的地址

下面是完整的代码

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

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

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

console.log(data);

data = JSON.parse(data);

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

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

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

});

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

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

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

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

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

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

name: txtName,

sex: cboSex,

address: txtAddress

}, function (msg) {

alert(msg);

});

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

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

serializeArray()将对象序列化为数组

下面是完整的代码：

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

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

console.log(data);

data = JSON.parse(data);

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

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

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

});

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

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

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

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

console.log(msg);

});