<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>
我的第一个ajax
</title>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="box" style="border:1px solid red;display: block;clear: both; 500px; height: 40px; margin:20px auto;">
</div>
<form id="form">
<div class="form-group">
<label>姓名：</label>
<input type="text" class="form-control " placeholder="姓名" name="user" >
</div>
<div class="form-group">
<label>价格：</label>
<input type="text" class="form-control" placeholder="价格" name="price" >
</div>
<div class="form-group">
<label>描述：</label>
<textarea class="form-control" rows="3" name="description"></textarea>
</div>
<div class="form-group">
<label>上传图片：</label>
<input type="file" name="img">
</div>
<center>
<button type="button" class="btn btn-default" name="submit">
提交
</button>
</center>
<div class="submit">
<span class="loading">正在提交...</span>
</div>
</form>
<script>
$(function() {
$('form button[type=button]').click(function() {
$.ajax({
type: "POST",
url: "formtest.php",
// 表单序列化
data: $('form').serialize(),
success: function(response, status, xhr) {
$('#box').html(response);
},
error: function(xhr, errorText, erroType) {
//alert('错误');
//alert(errorText+":"+erroType);
alert(xhr.status + ":" + xhr.statusText);
}
});
}); // $('form button[type=button]').click(function() {
// $.ajax({
// type: "POST",
// url: "formtest.php",
// //param() 方法用于在内部将元素值转换为序列化的字符串表示
// data:$.param({
// user:$('form input[name=user]').val(),
// price:$('form input[name=price]').val(),
// description:$('form textarea[name=description]').val()
// }),
// success: function(response, status, xhr) {
// $('#box').html(response);
// },
// error: function(xhr,errorText,erroType) {
// //alert('错误');
// //alert(errorText+":"+erroType);
// alert(xhr.status+":"+xhr.statusText);
// }
// });
// });
$(document).ajaxStart(function() {
$('.loading').show();
}).ajaxStop(function() {
$('.loading').hide();
});
})
</script>
</body>
</html>
formtest.php
<?php
echo $_POST['user']."-".$_POST['price']."-".$_POST['description'];
?>