前后端如何实现ajax交互 https://www.imooc.com/article/10371

慕课网

前端入门 Java小白入门

手记 \ 一个小案例搞懂前、后端是如何进行数据交互的

一个小案例搞懂前、后端是如何进行数据交互的 原创

2016-07-12 17:08:1258940浏览32评论

分享到

小字号

fhw2087

Web前端工程师做爱做的事

14篇手记13推荐

作者的热门手记

  • html+css+js制作简单钟表

    4813浏览64推荐5评论

  • html+css+js扫雷原代码，可以直接试玩了

    2703浏览43推荐1评论

  • HTML+CSS+JQ试做经典坦克大战（一）

    3471浏览37推荐6评论

  • 用HTML+CSS+JQ做坦克大战（阉割版）

    3479浏览36推荐4评论

  • 编写一个基于JQuery的自定义导航小框架

    2711浏览31推荐5评论

对应不少初学前端知识的小伙伴来说，如果实现前后端的数据交互，脑袋里很模糊，现在给大家介绍一个简单的案例帮助大家理解。



首先，我们来制作一个登录框，用来输入帐号和密码

<div class="login">
            <p class="loginTittle">登录</p>
            <span class="loginspan"> 帐号
            <input type="text" id="userName" value="输入你的帐号"/>
            <span></span>//装一个√或×，提示是否输入正确
            <br />
            <span>0</span><br />//帐号是否正确输入的状态字
            <img class="xbtn" src="" />
            密码
            <input type="password" id="password" />
            <span></span>
            <br />
            <span></span>
            </span>
            <input type="button" value="登   录" />
        </div>
这是登录框的html部分，CSS部分也不说了，这里不是重点
//主要就是ajax部分，这里用到了JQuery中的$.ajax函数，详细用法请参照JQ文档
$.ajax({
    ‘url‘:‘login.php‘,//第一个参数url，PHP脚本的位置，我要把参数传到什么位置
    ‘data‘:{"username":$(‘#userName‘).val(),"password":$(‘#password‘).val(),},//传递什么数据，这里我用的是json格式，如果不知道什么是json数据，可以自己搜索一下
    ‘success‘:function(data){//success表示，当服务器返回数据成功后，该做什么，返回的数据储存在data中，我们直接把data传入函数中。
        switch(data.type){
            case 0:alert(‘账户不存在‘);break;
            case 1:{
                $(‘#userMsg‘).children(‘li‘).eq(2).find(‘span‘).html(‘ ‘+data.gouwuchenum+‘ ‘);
                $(‘#loginMsg li‘).eq(1).empty().html(‘<span>‘+data.name+‘</span>‘);
                $(‘#loginMsg li‘).eq(2).empty().html(‘<a href="javascript:tuichu()">退出</a>‘);
                $(‘.login‘).animate({right:-180,opacity:0},400,function(){
                    $(this).css(‘display‘,‘none‘);
                });
                break;
            }
            case 2:alert(‘密码错误‘);break;
        }
    },
    ‘type‘:‘post‘,//type是ajax的方法，可以用post可以用get，两种方法的区别可以自己查阅资料
    ‘dataType‘:‘json‘,//传递的数据类型，对应我上面的数据格式，这里用json。数据类型也可以是html/xml等
});
上述脚本解释了，ajax是如何将前端的数据传送入后台的
//下面来看，php脚本是如何接受数据，处理数据，返回数据的
<?php
    $username=$_POST[‘username‘];
    $password=$_POST[‘password‘];//根据不同的方法，php会把接收的数据储存在$_POST/$_GET这样的全局变量中，前面的ajax我们用的是post方法，所以这里用$_POST接收数据
    $usermsg =array(
        ‘fhw7328126‘ => ‘7328126‘,
        ‘fhwlmmz‘ => ‘feng7328126‘,
        ‘dearmmz‘ => ‘123456‘,
        ‘rooter‘ => ‘dd‘,
    );
    $gouwuche=array(
        ‘fhw7328126‘ => 2,
        ‘fhwlovemmz‘ => 3,
        ‘dearmmz‘ => 8,
        ‘rooter‘ => 123,
    );
    $name=array(
        ‘fhw7328126‘ => ‘鱼鱼风‘,
        ‘fhwmmz‘ => ‘黄翔‘,
        ‘dearmmz‘ => ‘明珠‘,
        ‘rooter‘ => ‘管理员‘,
    );//这里我定义了3个数组，分别储存有用户的帐号密码购物车信息和昵称，事实上，一般这样的数据都是储存在数据库中，PHP可以与数据库交互，获得这些数据表。由于我还没有掌握如何使用数据库，这里就直接用偷懒的方法定义好数据表；
    $type=0;//定义一个变量，用来代表php处理数据的不同结果，默认0
    $gouwuchenum=0;//定义一个变量，用来装用户购物车数量信息，默认0
    $name2=0;//定义一个变量，用来装用户的昵称，默认0
    foreach($usermsg as $key => $value){//遍历数组
        if($username==$key and $password==$value){//如果帐号存在，且密码匹配
            $type=1;//状态字赋值为1；
            $gouwuchenum=$gouwuche[$key];//获取当前用户的购物车信息；
            $name2=$name[$key];//获取当前用户的昵称
            break;//跳出遍历
        }
        else if($username==$key and $password!=$value){//如果帐号存在但密码不匹配
            $type=2;//状态字赋值为2；
            break;
        }
    }
    $response=array(//定义php要返回的数据，这里先定义成数组类型
        ‘type‘ => $type,//返回状态字
        ‘gouwuchenum‘ =>$gouwuchenum,//返回购物车信息
        ‘name‘ => $name2,//返回昵称
    );
    echo json_encode($response);//将要返回的数组转化成json数据，打印出来。注意，PHP打印出什么，那么前端接收的数据就是什么。通篇浏览这个php文件，只有最后一行打印了一个json数据，所以前端得到的数据就是这个json。
?>
OK，这个php脚本，让大家知道了，后端如何接收数据，处理数据，以及返回数据。

下面，我们返回头来看看，前端接收到数据后是怎么处理的。

//success函数，表示前端收到数据成功后，要做什么
‘success‘:function(data){//这里的data储存有后端php返回的json数据
        switch(data.type){//以data.type为switch-case关键字，分类处理
            case 0:alert(‘账户不存在‘);break;//如果type=0，说明帐号密码都不匹配
            case 1:{//type=1，说明匹配成功，登录成功
                $(‘#userMsg‘).children(‘li‘).eq(2).find(‘span‘).html(‘ ‘+data.gouwuchenum+‘ ‘);//更新购物车数量
                $(‘#loginMsg li‘).eq(1).empty().html(‘<span>‘+data.name+‘</span>‘);//登录按钮更换为用户昵称；
                $(‘#loginMsg li‘).eq(2).empty().html(‘<a href="javascript:tuichu()">退出</a>‘);//注册按钮更换为退出按钮；
                $(‘.login‘).animate({right:-180,opacity:0},400,function(){//登录框隐藏
                    $(this).css(‘display‘,‘none‘);
                });
                break;
            }
            case 2:alert(‘密码错误‘);break;//type=2，表示用户存在但是密码不匹配
        }
    }

好了，到此为止，希望那些不知道ajax的同学们，可以大致了解到ajax是干什么的，php是干什么的。
更加具体的教材，可以查看慕课网上的AJAX视频教材！

相关标签：PHPHtml/CSSJQuery

本文原创发布于慕课网 ，转载请注明出处，谢谢合作！

346 人推荐

  • 分享到

    评论

    收藏

相关阅读

  • jQuery ajax 请求php遍历json数组到table中

  • JQUERY AJAX请求成功，返回了数据，但是不进SUCCESS的问题 【转】

  • form属性method="get/post"的两种方式对比

  • php与前端（二）：页面table的单元格的数据add和update

  • php与前端（四）： 弹出框layer 的使用

评论（Enter+Ctrl）

热门评论

蛋炒饭_00011F

不错不错。。。。。新手学到了。。

42016-07-13 10:55:16

GeorgeTan17F

看见鱼鱼风的时候我笑出了声

32016-08-01 13:57:47

32条评论

weixin_王怀青_034F

不错。。。。。。。。。。。。。。。。。。

0回复2017-09-04 14:11:19

weibo_Gingbery_033F

后端返回的json格式的数据吗？

0回复2017-07-30 10:26:01

潘岱第一帅32F

前端的数据交互 指的是什么 要做什么内容  像表格是用ajax来实现数据交互  那前端还有什么是需要数据交互的

0回复2017-07-24 20:29:28

fhw2087 回复 潘岱第一帅：

所有的增删改查，当你需要从服务端取数据修改数据添加数据删除数据，都必须有网络请求

回复2017-07-25 09:20:03

ExiaGo31F

你好，请问前端拿到的数据都是这样构造使用的吗？就是都要加上 HTML 的标签，然后使用那个返回的 data ，如果很多数据要显示，岂不是很重？

0回复2017-07-06 18:26:21

慕粉150952978130F

雕哥宝哥和奶子D呢？

1回复2017-06-14 23:57:27

EchoXiang29F

写得太清楚明白了，想问一下前后端交互还有哪些其他的方式呢？

0回复2017-05-31 18:09:35

mukF28F

一个前端 知道的太多了

1回复2017-04-07 18:41:11

Mihan27F

后端php处理数据的具体代码，需要我们前端写吗？还是说，理解前后端数据怎么传递和接收就行了？

0回复2017-04-07 09:45:06

fhw2087 回复 Mihan：

这里只是举个例子，前端一般不会去写后端代码，只要知道接口就行了

回复2017-04-07 10:30:49

mukF 回复 Mihan：

也试着写吧，是时候升级全栈了

回复2017-04-07 18:41:55

fhw2087 回复 mukF：

贵精不贵多，知识面要广，但要有自己专注的东西，有在自己专注领域解决难题的能力

回复2017-04-07 19:55:35

点击展开后面1条回复

oyadubanana26F

十分感谢！脑袋中大概知道这么个套路了

0回复2017-03-20 00:00:35

Benny85669425F

为啥没有cookie操作，那这个登录有意义吗

0回复2016-10-19 18:14:20

qq_南笙一梦_0405758024F

看到鱼鱼疯。。。。和黄翔。。。。笑，，，。

0回复2016-10-01 11:23:58

崔顺彪23F

思路已被拿走，谢了。

0回复2016-09-21 22:34:10

qq_九家_0387764822F


1

真帅大概能了解点了，希望在出点新的

0回复2016-08-25 21:30:26

菜鸟的背影20F

谢谢，讲解到位，学习了

0回复2016-08-06 10:26:05

qq_小亚YF_019F

非常好！！！希望你多出这类的讲解

0回复2016-08-03 17:41:55

qq_清风徐来_718F

挺详细的，，，，很不错

0回复2016-08-02 15:21:24

GeorgeTan17F

看见鱼鱼风的时候我笑出了声

3回复2016-08-01 13:57:47

qq_xiao洋_0323399516F

这里都能看到鱼鱼疯，哈哈哈哈

0回复2016-07-30 09:35:48

GeorgeYuan15F

学习了，虽然我按照视频敲过一遍！不过又温习了一遍

0回复2016-07-26 09:59:40

ocswor14F

浅显易懂,让移动端开发的人,一眼就明白了

0回复2016-07-25 09:03:39

首页上一页12下一页 尾页

Copyright ? 2018 imooc.com All Rights Reserved | 京ICP备 13046642号-2

运行代码

运行代码

运行代码

运行代码

原文地址：https://www.cnblogs.com/shuangjiang/p/8297175.html

时间： 2024-10-15 17:29:30

前后端如何实现ajax交互 https://www.imooc.com/article/10371的相关文章

前后端分离后API交互如何保证数据安全性

前后端分离后API交互如何保证数据安全性? 一.前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互. 网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,这样的接口对爬虫工程师来说是一种福音,要抓你的数据简直轻而易举. 数据的安全性非常重要,特别是用户相关的信息,稍有不慎就会被不法分子盗用,所以我们对这块要非

ASP.NET使用AJAX完成前后端表单数据交互（包含Vue绑定下拉选项）

毕业工作半年一直在做后端api,最近进入一个新项目同时做前后端,就从基础开始记录总结. 因为项目代码不便上传,以下代码是我将部分内容修改之后的结果,主要记录实现方法,有不当的地方还望大家交流指正~ HTML: <div id="Information"> <div id="SearchBarDiv" v-cloak> <form> <select id="YearSelect" class="f

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

Django 前后端数据传输、ajax、分页器

内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax ? 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 MTV模型 Django就是基于MTV模型的框架,其中: M:模型层 models.py T:templates V:视图层 views MVC模型 M:模型层 models V:视图层 views C:控制器 controller 本质:django的MTV也是MVC 二.多对多表三种创建方式 第一种:Django ORM自动帮创建 c

前后端交互之封装Ajax+SpringMVC源码分析

为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在开发中是经常用到的.再比如一些前端框架,例如easyui.ext.js等,ajax也是封装的. 编程的世界,封装无处不在. 具体js代码如下: /** * 增删改通用ajax请求 * @param type * @param url * @param datatype * @param conten

choices字段、MTV与MVC模型、AJAX、contentType前后端传输数据编码格式、序列化组件、AJAX+sweetalert使用

目录 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 MTV与MVC模型 ajax 特点: ajax传json格式数据 ajax传文件 ajax传文件需要注意的事项 contentType前后端传输数据编码格式 ajax + sweetalert的使用 序列化组件 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 主要运用在用一些特殊字符或数字代表繁琐的字符串

你不得不了解的前后端分离原理！

原文:来源于网络 前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互. 在互联网架构中,名词解释: Web服务器:一般

前后端分离原理

前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路.核心思想是前端HTML页面通过Ajax调用后端的restuful api接口并使用json数据进行交互. 在互联网架构中,名词解释: Web服务器:一般指像Nginx,A

JavaWeb项目放弃jsp？为什么要前后端解耦？为什么要前后端分离？

前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互. 名词解释:在互联网架构中,web服务器:一般指像nginx,ap