簡單描述一下功能:前端一個輸入框,按提交按鈕,將數據傳給後臺,若數據不爲空提示“成功!”,爲空則提示“失敗!”,若出現錯誤則提示“error!”。
程序所在文件圖:
jquery-1.11.3下載鏈接
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP_Ajax</title>
</head>
<body>
<input type="text" name="In">
<input type="submit" id="Submit" value="提交">
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jsTest.js"></script>
</body>
</html>
2、jsTest.js
$(document).ready(function() {
$("#Submit").click(function() {
$.ajax({
url: 'src/demo.php', // php程序的路徑
type: 'post', // 請求方式
dataType: 'json', // 數據格式
data:{str: $("input[name='In']").val()}, // 傳給後臺的數據
success: function(msg) {
if(msg == 1) {
window.alert("成功!");
}
else {
window.alert("失敗!");
}
},
error:function(){
window.alert("error!");
}
});
});
});
3、demo.php
<?php
$str = $_POST["str"]; // 獲取輸入值
if($str != null) { // 獲取的輸入值不爲空,返回1
echo 1;
}
else { // 爲空,返回0
echo 0;
}