jquery下,php和ajax數據交換

簡單描述一下功能:前端一個輸入框,按提交按鈕,將數據傳給後臺,若數據不爲空提示“成功!”,爲空則提示“失敗!”,若出現錯誤則提示“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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章