开发者社区> 哈你真皮> 正文

Ajax请求后台数据

简介: 一、前期准备 安装好XAMPP软件,并运行起来。本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB、PHP和Perl。
+关注继续查看

一、前期准备

安装好XAMPP软件,并运行起来。本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB、PHP和Perl。XAMPP开放源码包的设置让安装和使用出奇容易。

二、前后台数据交互

前台部分
其中“process.php?name=Herry”,向后台传递name数据


 document.getElementById("button").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name=Herry",true);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                console.log(data)
            }
        };
        xhr.send();
    })

后台PHP部分
后台接收了name数值,并向前台返回了"GET: 你的名字是". $_GET['name']


<?php 
       if (isset($_GET['name'])) {
           echo "GET: 你的名字是". $_GET['name'];
       }
?>

于是最后前台console里面得到:GET: 你的名字是Herry

三、正常表单提交到PHP与Ajax方式提交

正常表单GET提交数据到PHP

前台部分


<form action="process.php" method="GET">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>

后台PHP部分


<?php
       if (isset($_GET['name'])) {
           echo "GET: 你的名字是". $_GET['name'];
       }
?>

表单输入名字Bucky,然后点击提交后,浏览器将数据打包后,传递给后台,最后后台返回我们想要的数据----GET: 你的名字是Bucky。整个过程中页面有刷新,数据点击提交后,页面跳转到这个网址http://localhost/ajax/process...

Ajax请求后台数据GET

Ajax异步请求数据,无需刷新页面。可以提高用户体验,较少网络数据的传输量。click事件改成submit事件(表单应该用submit事件),然后取消默认事件。

前台部分


//Html部分
<form id="getForm">
    <input type="text"name="name" id="name1">
    <input type="submit"value="提交">
</form>
//Javascript部分
 document.getElementById("getForm").addEventListener("submit",function(e){
        e.preventDefault();//阻止默认跳转事件
        var name=document.getElementById("name1").value;//获取输入的值
        var xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name="+name,true);
        xhr.onreadystatechange=function () {
            if (  xhr.status == 200&&xhr.readyState == 4) {
                var data = xhr.responseText;
                console.log(data);
            }
        }
            xhr.send();
    })

后台PHP部分


<?php
       if (isset($_GET['name'])) {
           echo "GET: 你的名字是". $_GET['name'];
       }
?>

在表单输入Bucky,点击提交,最后在console显示:GET: 你的名字是Bucky。整个过程页面无刷新,有效提高页面性能。

正常表单POST提交数据到PHP

与GET提交数据差不多
前台部分


<form action="process.php" method="POST">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>

后台PHP部分


<?php
       if (isset($_POST['name'])) {
           echo "POST: 你的名字是". $_POST['name'];
           }
?>

表单输入名字Bucky,然后点击提交后,浏览器将数据打包后,传递给后台,最后后台返回我们想要的数据----POST: 你的名字是Bucky。整个过程中页面有刷新,数据点击提交后,页面跳转到这个网址http://localhost/ajax/process...。与GET方式提交不同的是,POST方法数据并没有内嵌在url中,这样安全性比较高。

Ajax请求后台数据POST

POST请求与GET主要有两点不同:

①post请求一定要设置请求头的格式内容:


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

②post请求参数放在send里面,即请求体


xhr.send("name="+name" );  

前台部分


//HTML部分
<form id="postForm">
    <input type="text"name="name" id="name2">
    <input type="submit"value="提交">
</form>
//Javascript部分
  document.getElementById("postForm").addEventListener("submit", function (e) {
        e.preventDefault();
        var name=document.getElementById("name2").value;
        var params = "name="+name;
        var xhr = new XMLHttpRequest();
        xhr.open("POST","process.php",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                console.log(data);
            }
        };
        xhr.send(params);
    })

后台PHP部分


<?php
     if (isset($_POST['name'])) {
        echo "POST: 你的名字是". $_POST['name'];
        }
?>

表单输入名字Bucky,然后点击提交后,最后在console显示:POST: 你的名字是Bucky。整个过程页面无刷新。

四、总结

1.在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,提高用户体验和页面性能。
2.GET参数通过URL传递,POST放在Request body中,后者安全性比较高。

来源:https://segmentfault.com/a/1190000017411394

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax请求不能下载文件(转载)
最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等 但是起初老是下载失败,并且弹出下面的乱码: 前台请求代码:   [html] view plain copy   $('#fileexcel').
1409 0
如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。
开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解。 我这篇博文的标题之所以用了三句,是为了方便其他人好查找;       这里介绍的方法有什么用呢? 使用它,就可以无闪刷新页面,并且从数据库获取实时改变的数据反馈回界面,显示出来!是不是很爽,的确。
1035 0
ajax请求后台,返回json格式数据,模板!
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术。将返回的json格式数据,添加到select标签下。           //加载出部门的信息            function loadGroup(){                            $.
997 0
Ajax-09:服务端响应JSON数据
Ajax-09:服务端响应JSON数据
32 0
Ajax-17:使用fetch函数发送ajax请求
Ajax-17:使用fetch函数发送ajax请求
35 0
Java学习--Ajax与数据库连接池
Java学习--Ajax与数据库连接池 概述 数据库连接池 Ajax简介 JavaScript实现Ajax jQuery实现Ajax 一:数据库连接池 数据库连接是一种关键的有限的昂贵的资源,对数据库连接的管理能显著影响到整个应用程序的性能。
1677 0
+关注
355
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载