EasyUI是一款很強(qiáng)大的前端UI框架，它可以幫助開(kāi)發(fā)者快速搭建出美觀、易用的Web頁(yè)面。其中，form是EasyUI中非常常用的一個(gè)組件，它可以讓我們方便地提交表單數(shù)據(jù)到服務(wù)器。本文將介紹EasyUI form提交json的方法。

首先，我們需要在HTML頁(yè)面中引入EasyUI的JS和CSS文件。例如：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

然后，我們需要在HTML頁(yè)面中創(chuàng)建一個(gè)form組件。例如：

<form id="myform">
<input name="username" class="easyui-textbox" required="true" label="Username:">
<input name="password" class="easyui-passwordbox" required="true" label="Password:">
 </form>

在這段代碼中，我們創(chuàng)建了兩個(gè)輸入框，分別用于輸入用戶(hù)名和密碼。其中，class屬性為“easyui-textbox”和“easyui-passwordbox”的控件是EasyUI組件，可以用于美化表單。

接下來(lái)，我們需要編寫(xiě)JavaScript代碼，實(shí)現(xiàn)將表單數(shù)據(jù)提交到服務(wù)器。具體方法如下：

$(function(){
$('#myform').form({
onSubmit:function(){
var isValid = $(this).form('validate');
if (isValid){
var data = $(this).serializeObject();
$.ajax({
url: 'submit.php',
dataType: 'json',
type: 'post',
data: JSON.stringify(data),
contentType: 'application/json; charset=UTF-8',
success: function(result){
//處理提交成功后的邏輯
}
});
}
return false;
}
});
 });

在這段代碼中，我們首先為form組件設(shè)置了一個(gè)onSubmit回調(diào)函數(shù)，該函數(shù)在表單提交前會(huì)被調(diào)用。在該函數(shù)中，我們首先調(diào)用了$(this).form('validate')方法，該方法可以驗(yàn)證表單數(shù)據(jù)是否合法。如果數(shù)據(jù)合法，我們就可以獲取表單數(shù)據(jù)，并將其轉(zhuǎn)化為JSON格式，然后使用jQuery的ajax函數(shù)將數(shù)據(jù)發(fā)送到服務(wù)器。

需要注意的是，我們?cè)赼jax函數(shù)中設(shè)置了dataType為json，type為post，contentType為application/json; charset=UTF-8。這些配置都是為了讓服務(wù)器能夠正確地解析提交的數(shù)據(jù)。另外，在成功回調(diào)函數(shù)中，我們可以處理提交成功后的邏輯。

至此，我們就完成了EasyUI form提交json的過(guò)程。通過(guò)這種方式，我們可以方便地將表單數(shù)據(jù)提交到服務(wù)器，并對(duì)提交結(jié)果進(jìn)行處理。