jQuery ajax - วิธี .param()

คู่มือ jQuery Ajax

ตัวอย่าง

เซอร์ีลายตัวแปร key/value ตัวแปร：

var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);

ผลลัพธ์:

width=1680&height=1050

TIY ตัวอย่าง

ปริมาณเซอร์ีลายตัวแปรภาค：

$("button").click(function(){
  $("div").text($.param(personObj));
});

ลองทำเลย

คำนิยามและวิธีใช้

วิธี .param() ทำการสร้างตัวแปรภาคหรือตัวแปรที่เซอร์ีลาย

ค่าที่เซอร์ีลายนี้สามารถใช้ในคำค้นหาของ URL ในการทำ AJAX ร้อยการ

การใช้งาน

jQuery.param(object,traditional)
ตัวแปร รายละเอียด
object อาเรย์หรือตัวแปรที่ต้องการเซอร์ีลาย
traditional กำหนดว่าจะใช้วิธีเซอร์ีลายที่แบบเก่า (shallow serialization) หรือไม่ (parameter serialization)

รายละเอียด

วิธี .param() ใช้ในการเปลี่ยนค่าขององค์ประกอบเป็นตัวแปรภาคที่เซอร์ีลายได้ โปรดดู .serialize() ดูข้อมูลเพิ่มเติม。

สำหรับ jQuery 1.3 ถ้าที่ส่งมาเป็นฟังก์ชัน จะได้ค่าที่กลับมาจากฟังก์ชัน .param() แทนที่จะกลับฟังก์ชันในรูปแบบของตัวแปรภาค

สำหรับ jQuery 1.4 วิธี .param() จะทำการเซอร์ีลายตัวแปรด้วยวิธีที่เรียกว่า recursion ตามรูปแบบของภาษาสคริปต์ที่มีความสมบูรณ์ในปัจจุบัน เช่น PHP, Ruby on Rails และอื่น ๆ คุณสามารถนำไปตั้งค่า jQuery.ajaxSettings.traditional = true; เพื่อปิดฟังก์ชันนี้ทั่วไป

ถ้าว่าตัวแปรที่ถูกส่งมาในอาเรย์ ต้องเป็นที่ .serializeArray() จะกลับค่าในรูปแบบของตัวแปรภาคของอาเรย์：

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"}
{name:"job",value:"Rock Star"}]

ข้อเตือน：เพราะมีบางโครงการที่มีความสามารถที่จะประสานกับตัวเลขที่ถูกเซอร์ีลายเพียงน้อยมาก ดังนั้นเมื่อส่งตัวแปรเป็นสตริงที่มีองค์ประกอบเป็นออบเจ็กท์หรือสตริงที่มีรูปแบบเนื่องในเนื่อง โปรดระมัดระวัง!

ใน jQuery 1.4 วิธีการเซอร์ีลายสำหรับองค์ประกอบ input ของ HTML5 จะถูกเซอร์ีลายเช่นเดียวกัน

ตัวอย่างเพิ่มเติม

เราสามารถแสดงค่าของตัวแปรคำถามของเป้าหมายและ URI รหัสไว้เช่นนี้:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);

recursiveEncoded และ recursiveDecoded ออกมาดังนี้:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

สามารถกำหนดตัวแปร traditional ให้เป็น true เพื่อโมเดลจัดการทางการใช้งานของ $.param() ก่อนเวอร์ชั่น 1.4 ของ jQuery ได้:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);

recursiveEncoded และ recursiveDecoded ออกมาดังนี้:

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

คู่มือ jQuery Ajax