jQuery EasyUI รูปแบบปลั๊กอิน - แบบ

การใช้

สร้างรูปแบบ HTML ที่เรียบง่าย สร้างรูปแบบและให้ ID, การกระทำ, การมอบหมายงานวิธี

<form id = "FF" method = "โพสต์">
    <div>
		<label สำหรับ = "ชื่อ"> ชื่อ: </ label>
		<input class = "easyui-validatebox" type = "text" name = "ชื่อ" data-ตัวเลือก = "จำเป็นต้องใช้: true" />
    </ div>
    <div>
		<label สำหรับ = "อีเมล"> อีเมล์: </ label>
		<input class = "easyui-validatebox" type = "text" name = "อีเมล" ข้อมูลตัวเลือก = "validType: 'อีเมล'" />
    </ div>
    ...
</ form>

ขอแบบฟอร์ม (Form) กลายเป็นส่งแบบฟอร์มอาแจ็กซ์ (รูปแบบ)

$ ( '# Ff'). แบบฟอร์ม ({
    URL: ... ,
    onSubmit: ฟังก์ชั่น () {
		// จะตรวจสอบบาง
		// กลับเท็จเพื่อป้องกันไม่ให้ส่ง;
    }
    ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
		แจ้งเตือน (ข้อมูล)
    }
});
// ส่งแบบฟอร์ม
. $ ( '# Ff') ส่ง ();

กระทำการส่ง

// โทร 'ส่ง' วิธีการปลั๊กอินแบบส่งแบบฟอร์ม
$ ( '# Ff'). แบบฟอร์ม ( 'ส่ง' {
    URL: ... ,
    onSubmit: ฟังก์ชั่น () {
		// จะตรวจสอบบาง
		// กลับเท็จเพื่อป้องกันไม่ให้ส่ง;
    }
    ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
		แจ้งเตือน (ข้อมูล)
    }
});

โดยการส่งพารามิเตอร์เพิ่มเติม

$ ( '# Ff'). แบบฟอร์ม ( 'ส่ง' {
    URL: ... ,
    onSubmit: ฟังก์ชั่น (พระราม) {
		param.p1 = 'value1';
		param.p2 = 'value2';
    }
});

ส่งการประมวลผลการตอบสนอง

ส่งแบบฟอร์มอาแจ็กซ์ (แบบ) เป็นเรื่องง่ายมาก เมื่อส่งเสร็จสมบูรณ์ผู้ใช้สามารถรับข้อมูลการตอบสนอง โปรดทราบว่าข้อมูลการตอบสนองเป็นข้อมูลดิบจากเซิร์ฟเวอร์ วิเคราะห์ข้อมูลสำหรับการดำเนินการตอบสนองต่อการร้องขอข้อมูลที่ถูกต้อง

ตัวอย่างเช่นสมมติว่าการตอบสนองเป็นรูปแบบ JSON ข้อมูลเป็นข้อมูลการตอบสนองโดยทั่วไปมีดังนี้

{
    "ความสำเร็จ": ความจริง
    "ข้อความ": "ข้อความถูกส่งเรียบร้อยแล้ว."
}

ตอนนี้จัดการสตริง JSON 'ความสำเร็จ' ฟังก์ชันการเรียกกลับ

$ ( '# Ff'). แบบฟอร์ม ( 'ส่ง' {
    ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
		var ข้อมูล = EVAL ( '(' + ข้อมูล + ')'); // เปลี่ยนสตริง JSON ไปยังวัตถุ JavaScript
		ถ้า (data.success) {
			แจ้งเตือน (data.message)
		}
    }
});

คุณสมบัติ

เหตุการณ์

ทาง

$.messager.progress();	// display the progress bar
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// hide progress bar while the form is invalid
		}
		return isValid;	// return false will stop the form submission
	},
	success: function(){
		$.messager.progress('close');	// hide progress bar while submit successfully
	}
});

$('#ff').form('load','get_data.php');	// load from URL

$('#ff').form('load',{
	name:'name2',
	email:'[email protected]',
	subject:'subject2',
	message:'message2',
	language:5
});