先貼出來兩個 `PHP` 文件
>test.php
```
<?php
$result = $_POST;
print_r($result);
```
>test2.php
```
<?php
$arr = array('code'=>0,'msg'=>'請傳入有效的參數','data'=>'','url'=>'test3');
echo json_encode($arr);
```
## 表單1-最開始的表單
```
<form action="test.php">
<input type="text" name="user" value="hongwei"/>
<input type="submit" id="submittest">
</form>
```
## 表單2-帶有hidden的表單
```
<form action="test.php">
<input type="text" name="user" value="hongwei"/>
<input type="hidden" name="age" value="34"/>
<input type="submit" id="submittest">
</form>
```
## 表單3-ajax表單
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<form action="test2.php">
<input type="text" name="user" value="hongwei"/>
<button id="submittest" type="button">button</button>
</form>
<script>
$(function () {
$("#submittest").click(function(){
var data = {
"user":$("input[name='user']").val(),
"age":34
};
$.ajax({
type : "post",
url : $("form").attr('action'),
data: data,
error: function(request) {
alert("服務器繁忙, 請聯系管理員!");
return;
},
success: function(ret) {
console.log(ret);
if(data.length!=0){
//todo
}else{
//todo
}
}
})
})
})
</script>
```
## 表單4：ajax-get表單
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<button id="submittest" type="button">button</button>
<script>
$(function () {
$("#submittest").click(function(){
$.get('test2.php',function (ret) {
console.log(ret);
})
})
})
</script>
```
## 表單5：ajax-post表單
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<button id="submittest" type="button">button</button>
<script>
$(function () {
$("#submittest").click(function(){
$.post('test2.php',function (ret) {
console.log(ret);
})
})
})
</script>
```
## 表單6-jquery.form表單-ajaxForm
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<form id="myForm" action="test.php" method="post">
<input type="text" name="name">
<input type="submit" id="test" value="提交">
<div id="output1" style="display: none"></div>
</form>
<script>
$(function () {
$("#myForm").ajaxForm(function () {
$('#output1').html('提交成功！').show();
})
})
</script>
```
## 表單7-jquery.form表單-ajaxSubmit
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<form id="myForm" action="test.php" method="post">
<input type="text" name="name">
<input type="submit" id="test" value="提交">
<div id="output1" style="display: none"></div>
</form>
<script>
$(function () {
$("#myForm").submit(function () {
$(this).ajaxSubmit(function () {
$('#output1').html('提交成功！').show();
});
return false;
})
})
</script>
```
## 有時間再繼續
