传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2018-1-17 14:38 编辑

【济南校区】PHP模块讲解之ajax(二)

上一节课我们简单的讲解了一下ajax的基本原理,今天我们就给大家带来ajax如何进行数据传递的

ajax发送数据传递的方式有两种:get方式和post方式

一、发送GET请求

1、 GET请求语法
xhr.open(‘get’,’url?query=value’);
xhr.send(null);
如果有参数,需要加在url的后面

2、 GET请求示例
html
[JavaScript] 纯文本查看 复制代码
                window.onload = function(){[/align]                        $('#btnOk').onclick = function(){
                                //获取文本框的值
                                var first = $('#first').value;
                                var second = $('#second').value;
                                //创建ajax对象
                                var xhr = createxhr();
                                //生成参数字符串
                                var str = 'first='+first+'&second='+second;
                                //初始化ajax对象
                                xhr.open('get','demo.php?'+str);
                                //设置回调函数
                                xhr.onreadystatechange = function(){
                                        //如果对象的状态码为4(接受数据完毕)
                                        if (xhr.readyState == 4) {
                                                //获取结果
                                                $('#res').value = xhr.responseText;
                                        }
                                }
                                //发送ajax请求
                                xhr.send(null);
                        }
                }

php
[PHP] 纯文本查看 复制代码
<?php
$first = $_GET['first'];
$second = $_GET['second'];

echo $first+$second;
运行结果:
1.png

二、发送POST请求

1、 get和post的区别

get:参数附加url后面
post:参数放在请求空白行的后面

get:最大传输量为2k
post:理论上无限制

get:只能传输文本数据
post:可以传输入文本和二进制数据

get的请求头
2.png
post的请求头
3.png
post请求时会比get请求多一个Content-Type的请求头,表示本次提交数据的类型

2、 Ajax中的post请求

xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
post请求在IE下不会产生缓存问题
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">
                window.onload = function(){
                        $('#btnOk').onclick = function(){
                                //获取文本框的值
                                var username = $('#username').value;
                                var password = $('#password').value;
                                //创建ajax对象
                                var xhr = createxhr();
                                xhr.open('post','demo.php');
                                //设置请求头
                                xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');

                                //设置回调函数
                                xhr.onreadystatechange = function(){
                                        if (xhr.readyState == 4&&xhr.status ==200) {
                                                //获取结果
                                                alert(xhr.responseText);
                                        }
                                }
                                //发送ajax请求
                                xhr.send('username='+username+'&password='+password);
                        }
                }
</script>

到此为止,ajax的数据传输就给大家介绍到这里,不知道大家对我今天讲解的ajax的原理理解的如何,有什么问题可以在下面留言哦~
如果你想了解更多黑马课程请点击这里,如果你想加入黑马这个大家庭学习先进技术,广交天下好友!
黑马程序员济南中心联系电话:0531-55696830

分享至 : QQ空间
收藏

1 个回复

倒序浏览
感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条