ajax实现两个php传数组

原创

ithorizon 7个月前 (10-18) 阅读数 72 #PHP

近年来，随着互联网技术的日益迅速的发展，越来越多的网站开始使用ajax来提升用户体验。本文将介绍如何通过ajax实现两个php文件之间的数组传输。

一、什么是Ajax

Ajax（Asynchronous JavaScript and XML）即异步JavaScript和XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对页面的某部分进行更新。这样可以提高页面的响应速度，增加用户体验。

二、什么是数组

数组是一组有序的变量集合，可以是任意数据类型，包括字符串、数字、对象等等。一个数组可以存储多个值，并且每个值都可以通过一个唯一的索引来访问。

立即学习“PHP免费学习笔记（深入）”；

三、使用Ajax传输数组

步骤一：创建两个php文件，一个用于发送数组（send.php），一个用于接收数组（receive.php）。

send.php文件代码：

<?php $array = array("name" => "Tom", "age" =&gt; "25", "gender" =&gt; "male");
echo json_encode($array);
?&gt;

登录后复制

receive.php文件代码：

<?php $data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?&gt;

登录后复制登录后复制

步骤二：使用XMLHttpRequest对象创建一个Ajax请求。

var xhr = new XMLHttpRequest();

登录后复制

步骤三：使用open()方法打开一个请求。

xhr.open("POST", "receive.php", true);

登录后复制

步骤四：设置HTTP请求头。

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

登录后复制

步骤五：设置onreadystatechange事件处理程序，以便在服务器响应时执行相应的操作。

xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
   }
};

登录后复制

步骤六：将要发送的数据编码为URL格式。

var data = "data=" + encodeURIComponent(JSON.stringify(array));

登录后复制

步骤七：发送请求。

xhr.send(data);

登录后复制

四、实际应用

下面是一个具体的例子，演示如何使用Ajax传输两个php文件之间的数组。假设我们有一个表单，用户输入姓名、年龄、性别等信息，然后提交表单，将这些信息通过Ajax发送到send.php文件，并返回到receive.php文件，最后显示出来。

代码如下：



Ajax传输数组
    
    
    
          
	<script>
   function sendArray() {
      var array = {};
      array['name'] = document.getElementById('name').value;
      array['age'] = document.getElementById('age').value;
      array['gender'] = document.getElementById('gender').value;

      var xhr = new XMLHttpRequest();
      xhr.open(&quot;POST&quot;, &quot;receive.php&quot;, true);
      xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
         }
      };
      var data = &quot;data=&quot; + encodeURIComponent(JSON.stringify(array));
      xhr.send(data);
   }
</script>

登录后复制

receive.php文件代码：

<?php $data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?&gt;

登录后复制登录后复制

五、总结

本文介绍了如何使用Ajax传输数组，通过一个实际的例子来演示了具体的实现过程。Ajax不仅可以提高网页的响应速度，还可以优化用户体验。通过学习本文，相信大家对Ajax及数组传输有了更深入的理解和应用认识。

以上就是ajax实现两个php传数组的详细内容，更多请关注IT视界其它相关文章！