jquery 的$.ajax() 与php后台交互,jquery.ajax
看了菜鸟ajax的系列教程:对ajax有了初步的了解,但是我主要是想利用ajax与php做前后台交互的,所以便想着一步步实现这个想法,因为对ajax不是特别熟悉,所以写的都是菜鸟般的代码,见谅。。
看了菜鸟的ajax系列教程,都没有讲到JQuery的$.ajax()方法怎么使用,希望有机会可以加上,让更多读者可以了解。
但是W3School有这一节教程:http://www.w3school.com.cn/jquery/ajax_ajax.asp
JS库和CSS库建议直接使用国内的cdn,省去很多功夫,http://www.bootcdn.cn/
那先来一个简单的交互吧,但是要注意的是在使用ajax与php后台交互的时候,一定要打开服务器,否则很多时候会出现错误,我说打开服务器的意思是,直接在浏览器输入:localhost是可以有效访问的意思。
好了,下面看看JQuery的ajax()与php交互的简单例子吧:
index.html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--利用cdn添加js和css库 --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body > 姓名: <input type="text" name="username" id="yourName" /> <button id="send">提交</button> <br><br><br><br> <div id="result">结果:</div> </body> <script type="text/javascript"> $(function () { $("#send").click(function () { var name = $("#yourName").val(); var data = "name="+name; //如果后台是$_POST方法获取数据,那么一定要索引(例如:索引name) $.ajax({ type: "POST", url: "server.php", //同目录下的php文件 data:"name="+name, // 等号前后不要加空格 success: function(msg){ //请求成功后的回调函数 $("#result").append("你的名字是"+msg); } }); }) }) </script> </html>
<?php $username = $_POST['name'];//获取索引值 echo $username; ?>
PHP之友评论