jquery 的$.ajax() 与php后台交互

最新推荐文章于 2024-03-02 11:28:57 发布

C-Jun

最新推荐文章于 2024-03-02 11:28:57 发布

阅读量1.2w

点赞数 15

分类专栏： ajax与php后台交互文章标签： ajax php

本文链接：https://blog.csdn.net/ccccc_Jun/article/details/79132779

版权

ajax与php后台交互专栏收录该内容

7 篇文章 1 订阅

订阅专栏

看了菜鸟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 style="text-align: center; padding: 100px;">

 姓名： <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>

server.php 代码

<?php

	$username = $_POST['name'];//获取索引值
	echo  $username;

?>

C-Jun

关注

15
点赞
踩
38

收藏

觉得还不错? 一键收藏
8
评论
jquery 的$.ajax() 与php后台交互

看了菜鸟ajax的系列教程：对ajax有了初步的了解，但是我主要是想利用ajax与php做前后台交互的，所以便想着一步步实现这个想法，因为对ajax不是特别熟悉，所以写的都是菜鸟般的代码，见谅。。看了菜鸟的ajax系列教程，都没有讲到JQuery的$.ajax()方法怎么使用，希望有机会可以加上，让更多读者可以了解。但是W3School有这一节教程：http://www.w3sch
复制链接

扫一扫