jQuery 基础使用与样式篇
jQuery中的ajax()
jQuery中的$.ajax({settings})方法
$.ajax({settings});
type:类型,“POST"或"GET”,默认值为"GET"
url:发送请求的地址
async:设置异步,(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,
请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
data:是一个对象,连同请求发送到服务器的数据
dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据http包MIME信息来智能判断,
一般我们采用json格式,可以设置为"json"
success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串
error:是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象
jQuery中ajax方法从服务器上获取数据
function jqGetData() {
$.ajax({
type: “get”,
url: “/jQueryAjax/getPersonInfor”,
async:true,//如果设置的值为true则可以省略该行代码
dataType: “json”,
success: function (data) {
console.log(data);//js对象
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
}
})
}
jQuery中ajax方法将表单数据提交给服务器
表单序列化
serialize() 序列表单内容为字符串,用于 Ajax 请求
serializeArray() 序列化表单元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。
注意:此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作
返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数
function jqSubmitForm() {
var name = $("#txtName").val();
var sex = $("#cboSex").val();
var address = $("#txtAddress").val();
if (name == “” || sex == 0 || address == “”) {
alert(“请检查数据是否完成”);
return false;
}
var frmdata = “name=” + name + “&sex=” + sex + “&address=” + address;
var serData = $("#myform").serialize();
var arrData = $("#myform").serializeArray();
console.log(serData);
console.log(arrData);
KaTeX parse error: Expected 'EOF', got '}' at position 384: … }) }̲ jQuery中的.post() $.get()
.
g
e
t
J
S
O
N
(
)
j
Q
u
e
r
y
中
的
.getJSON() jQuery中的
.getJSON()jQuery中的.get()方法
语法:$.get(url, [data], [callback], [type])
描述:通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用
.
a
j
a
x
。
参
数
说
明
:
u
r
l
:
发
送
请
求
地
址
。
d
a
t
a
:
待
发
送
K
e
y
/
v
a
l
u
e
参
数
。
c
a
l
l
b
a
c
k
:
发
送
成
功
时
回
调
函
数
。
t
y
p
e
:
返
回
内
容
格
式
,
x
m
l
,
h
t
m
l
,
s
c
r
i
p
t
,
j
s
o
n
,
t
e
x
t
,
d
e
f
a
u
l
t
。
使
用
.ajax。 参数说明: url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式,xml, html, script, json, text, _default。 使用
.ajax。参数说明:url:发送请求地址。data:待发送Key/value参数。callback:发送成功时回调函数。type:返回内容格式,xml,html,script,json,text,default。使用.get()方法从服务器上获取数据
function getFun() {
$.get("/jQueryAjax/getPersonInfor", function (data) {
//console.log(data);
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲txtAddress").va….post()方法
语法:$.post(url, [data], [callback], [type])
描述:通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
参数说明:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
function postFun() {
var strname = $("#txtName").val();
var strsex = $("#cboSex").val();
var straddress = $("#txtAddress").val();
if (strname == “” && strsex == 0 && straddress == “”) {
alert(“请检查表单是否填写完毕!”);
return false;
}
var frmData = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲myform").serial….post("/jQueryAjax/getDataByRequest", { name: strname, sex: strsex, address: straddress }, function (msg) {
// alert(msg);
//});
KaTeX parse error: Expected 'EOF', got '}' at position 117: … }); }̲ jQuery中的.getJSON()方法
语法:$.getJSON(url, [data], [callback])
描述:通过 HTTP GET 请求载入JSON数据
参数说明:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
function getJSONFun() {
var name = $("#txtName").val();
var sex = $("#cboSex").val();
var address = $("#txtAddress").val();
if (name == “” && sex == 0 && address == “”) {
alert(“请检查表单是否填写完毕!”);
return false;
}
var frmData = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲myform").serial….getJSON()方法只能接受返回值为json的数据
$.getJSON("/jQueryAjax/getDataByEntityClass", frmData, function (msg) {
console.log(msg);
alert(msg);
});
}
获取表单数据的4种方式:(可以接收post与get提交的数据)
1.通过形参的方式接收表单提交的数据
public ActionResult GetData(string name, string sex, string address)
string str = “1.通过形参的方式接收表单提交的数据” + name + “&” + sex + “&” + address;
return Content(str);
2.通过FormCollection来接收表单的数据
public ActionResult getDataByFormCollection(FormCollection form)//实例
{
string name = form[“name”];
string sex = form[“sex”];
string address = form[“address”];
string str = “2.通过FormCollection来接收表单的数据” + name + “&” + sex + “&” + address;
return Content(str);
}
3.通过 Request.Form[“name的属性值”]获取表单数据
public ActionResult getDataByRequest()
{
string name = Request.Form[“name”];
string sex = Request.Form[“sex”];
string address = Request.Form[“address”];
string str = “3.通过Request.Form来接收表单的数据” + name + “&” + sex + “&” + address;
return Content(str);
}
4.EntityClass实体类接收数据
public ActionResult getDataByEntityClass(Person person)
{
string name = person.name;
string sex = person.sex;
string address = person.address;
string str = “4.EntityClass实体类接收数据” + name + “&” + sex + “&” + address;
//return Content(str);
return Json(str,JsonRequestBehavior.AllowGet);
}