EasyUI Form 是一款便于處理表單的插件，它可以將表單的輸入值以 JSON 格式返回。下面我們將介紹如何使用 EasyUI Form 插件返回 JSON 數(shù)據(jù)。

首先，需要在需要使用 EasyUI Form 插件的頁面中引入 EasyUI 的 CSS 和 JS 文件。

<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>

接著，在頁面中使用 form 標(biāo)簽創(chuàng)建一個(gè)表單，并將其生成 EasyUI Form 插件。

<form id="myForm">
<div class="form-item">
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
</div>
<div class="form-item">
<label for="age">年齡:</label>
<input type="text" name="age" id="age">
</div>
<div class="form-item">
<label for="tel">電話:</label>
<input type="text" name="tel" id="tel">
</div>
</form>
<script type="text/javascript">
$(function(){
$('#myForm').form({
onSubmit: function(){
// 表單提交時(shí)調(diào)用
return $(this).form('validate');
},
success: function(data){
// 表單提交成功后的回調(diào)函數(shù)
// data 為返回的數(shù)據(jù)
alert(data);
}
});
});
</script>

在提交表單之后，將會(huì)調(diào)用 success 屬性所指定的回調(diào)函數(shù)，在這個(gè)函數(shù)中可以獲取到返回的 JSON 數(shù)據(jù)。

如果需要指定返回的數(shù)據(jù)類型為 JSON，在 onSubmit 屬性的函數(shù)中需要使用 return false 阻止表單的默認(rèn)提交行為，并且在 success 屬性的回調(diào)函數(shù)中使用 JSON.parse() 方法將返回的數(shù)據(jù)解析成 JSON 對(duì)象。

<script type="text/javascript">
$(function(){
$('#myForm').form({
onSubmit: function(){
// 阻止表單的默認(rèn)提交行為
return false;
},
success: function(data){
// 解析返回的 JSON 數(shù)據(jù)
var result = JSON.parse(data);
// 獲取到返回的數(shù)據(jù)并進(jìn)行處理
console.log(result.name);
console.log(result.age);
console.log(result.tel);
}
});
});
</script>

使用以上方法，就可以很方便地將表單中的數(shù)據(jù)以 JSON 格式返回了。