jEasyUI는 비동기식 제출 양식을 생성합니다.

이 튜토리얼에서는 easyui를 통해 양식(Form)을 제출하는 방법을 보여줍니다. 이름, 이메일, 전화번호 필드가 포함된 양식을 만듭니다. easyui 양식 플러그인을 사용하여 양식을 ajax 양식으로 변경하십시오. 양식은 모든 필드를 백엔드 서버에 제출하고 서버는 일부 데이터를 처리하여 프런트엔드 페이지로 다시 보냅니다. 우리는 반환 데이터를 수신하고 이를 표시합니다.

양식 만들기(Form)

	<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
	<form id="ff" action="form1_proc.php" method="post">
		<table>
			<tr>
				<td>Name:</td>
				<td><input name="name" type="text"></input></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input name="email" type="text"></input></td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td><input name="phone" type="text"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Submit"></input></td>
			</tr>
		</table>
	</form>

Ajax 양식으로 변경

	$('#ff').form({
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

서버측 코드

	$name = $_POST['name'];
	$email = $_POST['email'];
	$phone = $_POST['phone'];

	echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

jQuery EasyUI 예제 다운로드

jeasyui-form-form1.zip