精华内容
下载资源
问答
  • 3:前端ajax调用接口方式

    千次阅读 2019-09-27 20:41:10
    前端调用后台接口的几种方式 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/jitianxia68/article/details/78393406 一、Ajax方式 ...

    前端调用后台接口的几种方式

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明。

    本文链接:https://blog.csdn.net/jitianxia68/article/details/78393406

    一、Ajax方式

    首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据。
    这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。

    用户登录接口URL:http://localhost:8080/user/login.do , Method: POST

    输入参数:username=admin

    password=123456

    输出:登录成功:{"result":"sucess", "code":100}

    登录成功:{"result":"fail", "code":101}
    登录成功:{"result":"fail", "code":102}

    编写javascript(Ajax)调用接口:

    var xmlhttp;
    if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
    }
    else{// IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //上面的http请求对象的生成做了一个浏览器兼容性处理
    var adminName = document.getElementById('adminName').value;//获取html表单中adminName输入域对象的值,既账号
    var psw = document.getElementById('psw').value;//获取html表单中pwd输入域对象的值,既密码          
    
    xmlhttp.onreadystatechange=function(){
    //当接受到响应时回调该方法
            if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
            {
                        var tip = document.getElementById('tip');//获取html的tip节点,主要用于输出登录结果
                        var text = xmlhttp.responseText;//使用接口返回内容,响应内容
                        var resultJson = eval("("+text+")");//把响应内容对象转成javascript对象
                        var result = resultJson.result;//获取json中的result键对应的值
                        var code = resultJson.code;//获取json中的code键对应的值
                        if (result=="fail") {//登录失败
                            if(code==101){
                                tip.innerHTML = "密码错误!"
                            }else if(code==102){
                                tip.innerHTML = "用户不存在!
    
                            }
                        }else //登录成功        if(result=="success"&&code==100){
                            window.location.href="center.html";//跳转到centent.html页面
                        }
              }
    } 
    
    
    
     xmlhttp.open("POST","control1/login",true);//以POST方式请求该接口
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
     xmlhttp.send("adminName="+adminName+"&psw="+psw);//发送请求参数间用&分割

    上面的代码中主要实现请求后台登录接口,若登录成功就跳转到用户中心,若登录失败,根据返回的code提示用户登录失败的原因。

    转载于:https://www.cnblogs.com/wzz2500/p/11349872.html

    展开全文
  • 通过设置Access-Control-Allow-Origin来实现跨域。   ...   ...如果直接使用ajax访问,会有以下错误:   XMLHttpRequest cannot load http://server.taidupa.com/server.php. No 'Acce...

    通过设置Access-Control-Allow-Origin来实现跨域。

     

    例如:客户端的域名是client.taidupa.com,而请求的域名是server.taidupa.com。

     

    如果直接使用ajax访问,会有以下错误:

     

    XMLHttpRequest cannot load http://server.taidupa.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.taidupa.com' is therefore not allowed access.

     

    1、允许单个域名访问

     

    指定某域名(http://client.taidupa.com)跨域访问,则只需在http://server.taidupa.com/server.php文件头部添加如下代码:

     

    header('Access-Control-Allow-Origin:http://taidupa.com');

    2、允许多个域名访问

     

    指定多个域名(http://client1.taidupa.com、http://client2.taidupa.com等)跨域访问,则只需在http://server.taidupa.com/server.php文件头部添加如下代码:

    $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  

       

    $allow_origin = array(  

        'http://client1.taidupa.com',  

        'http://client2.taidupa.com'  

    );  

       

    if(in_array($origin, $allow_origin)){  

        header('Access-Control-Allow-Origin:'.$origin);       

    }

    3、允许所有域名访问

     

    允许所有域名访问则只需在http://server.taidupa.com/server.php文件头部添加如下代码:

     

    header('Access-Control-Allow-Origin:*');

    展开全文
  • 前端ajax调用java后台接口的方法封装

    千次阅读 2019-08-22 11:03:09
    1、封装ajax的方法 var token = window....* url:后台接口 * type:请求方法 * data:传递给后台的参数 * async:同步异步的参数(true:异步;false:同步) * callback:成功的回调方法 * errorback:失...

    1、封装ajax的方法

    var token = window.localStorage.getItem("token") || '';   //后台是否需要token
    /*ajax请求回调
    * url:后台接口
    * type:请求方法
    * data:传递给后台的参数
    * async:同步异步的参数(true:异步;false:同步)
    * callback:成功的回调方法
    * errorback:失败的回调方法
    * */
    window.baseurl = ' ';  //后台ip和端口
    (function (app, $) {
       //发送请求
        app.send = function (url, type, data, async, callback,errorback) {
            var sendUrl = baseurl + url;
            var aj = $.ajax({
                url: baseurl + url,
                type: type,
                dataType: 'json',
                data: type == 'get' ? data : JSON.stringify(data),  //根据需求编辑传递参数的格式
                headers: {"authorization": token},
                async: async,
                contentType: 'application/json;charset=utf-8',
                xhrFields: {
                    withCredentials: true   //跨域请求要想带上cookie,必须要在ajax请求里加上xhrFields: {withCredentials: true}。
                },
                error: function (err) {
                    if(errorback != undefined)  {
                        errorback(err);
                    }
                    console.log(err)
                    //报错的时候提示
                },
                success: function (msg) {
                    callback(msg);
                }
            })
        }
        //用于查询
        app.get = function (url, data, callback,errorback) {
            app.send(url, 'get', data, true, callback,errorback)
        }
        //用于同步查询
        app.getAsync = function (url, data, callback,errorback) {
            app.send(url, 'get', data, false, callback,errorback)
        }
        //用于非查询请求
        app.post = function (url, data, callback,errorback) {
            app.send(url, 'post', data, true, callback,errorback)
        }
        //用于同步非查询
        app.postAsync = function (url, data, callback,errorback) {
            app.send(url, 'post', data, false, callback,errorback)
        }
    })((window.app = {}), $)
    

    2、调用封装的ajax请求

     app.get("api", ' ', function (res) {   console.log(res);  });
     //其他方法如上格式传递参数
    
    展开全文
  • 项目是调用后台接口,对照其他博主的一个跨域对照表,同一域名下,不同协议不允许跨域 解决方案: 在调用接口添加:header('access-Control-Allow-Origin:*'); 跨域头,允许所有域名访问。 ...

    虽然状态码是200
    在这里插入图片描述
    但实际存在跨域问题
    在这里插入图片描述
    虽然ajax请求的状态码为200但进入的是error
    在这里插入图片描述
    在这里插入图片描述
    项目是调用后台接口,对照其他博主的一个跨域对照表,同一域名下,不同协议不允许跨域
    在这里插入图片描述
    解决方案:
    在调用的接口添加:header('access-Control-Allow-Origin:*'); 跨域头,允许所有域名访问。
    在这里插入图片描述

    展开全文
  • 首先确保jsp 接口 OK,请求数据很简单,就写个简单的ajax如下: $.ajax({ type: "GET", contentType: "application/json;charset=UTF-8", url: "/jsp/index.jsp", //接口路径 dataType:...
  • 如上图,通过ajax进入后台导出方法,后台...Ajax直接调用后台的下载方法是导出不了文件的,原因是ajax无法接收后台的文件流,所以,需要再次用window.location=url或者window.open(url)下载; 但是这样的话,后台...
  • ajax调用接口415错误

    千次阅读 2018-05-07 19:21:32
    ajax调用接口415错误的时候,很可能是你忘记在ajax中加入contentType: "application/json;charset=UTF-8",了
  • ajax调用接口

    千次阅读 2018-12-21 18:26:24
    2、ajax编写 /** * @param {string} url -- 请求路径 * @param {Object} data -- 请求参数 * @param {Function} successCallBack -- 成功回调 * @param {Function} errorCallBack -- 失败回调 * @param {...
  • } } /** *2、上传文件---支持formdata形式(适用于H5前端组件ajax上传)---解决Springboot 直接使用MultiPartFile file 接收文件报: *java.io.FileNotFoundException异常;网上查了很多都不能解决使用...
  • Yii2.0有自己的一套防止跨域调用的机制,网上一搜一大把的解决方式,无非就是: use yii\filters\Cors; public function behaviors() { return ArrayHelper::merge([ [ 'class' => Cors::className(),...
  • JQ ajax方法调用后台 *![图片说明](https://img-ask.csdn.net/upload/201701/20/1484896766_844737.png) 后台方法 ![图片说明](https://img-ask.csdn.net/upload/201701/20/1484896780_821215.png)
  • 前端初学者一看就懂:Ajax调用后台接口案例

    万次阅读 多人点赞 2018-09-15 16:03:09
    一直以来很多初学者对于ajax调用后台接口总是不能很明白,以下这个案例,能很清楚的过程展现给大家: 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回...
  • 前段时间在做项目的时候遇到一个问题,在开发webapp的时候使用ajax调用后端接口的时候,出现了接口数据错乱的问题,现在总结一下问题描述: 同一个页面同时调用多个接口:A、B、C、D、E,正常返回结果应该是A-a, B-...
  • webApi前端ajax调用后端返回{"readyState":0,"status":0,"statusText":"error"}解决方案
  • 举个栗子,比如说调用聚合数据的微信精选接口获得微信新闻数据,前端使用ajax,请求访问springboot程序,boot再请求聚合数据接口,拿到返回结果集并在页面显示出来,按钮可以切换新闻,就像这样子: 由此看出,咱...
  • 后台直接调用curl函数即可,比如,我封装了一个http_request()的函数,直接调用即可。...需要注意的是:被请求的后台接口在return之前需要加以下的,不然会有跨域问题: header('content-type...
  • 问题描述:前端跨域调用后端其他controller的接口,后端成功接收到请求并且成功处理,但是返回数据时浏览器拒绝接收。 解决办法:应设置响应头的信息 设置response.setHeader的“Access-Control-Allow-Origin”为...
  • ajax方法调用后台方法:![图片说明](https://img-ask.csdn.net/upload/201701/22/1485065749_853322.png) 后台方法: ![图片说明](https://img-ask.csdn.net/upload/201701/22/1485065997_209146.png) 在本地发布...
  • ajax调用查询接口,立即刷新页面列表 getData()是我前端调用后端的查询列表数据的方法,。
  • 既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP。所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互。 使用HBuilder新建示例教程后,里面会有一个ajax(网络请求)的列子,文件目录...
  • 前端调用后台接口

    万次阅读 2018-07-03 19:51:37
    这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。 用户登录接口URL:http://localhost:8080/user/login.do , Method: POST 输入参数:username=admin pass...
  • 前端调用Ajax上传文件

    2020-07-14 09:39:18
    前端调用Ajax上传文件至服务器,前后台已调试通,下载解压即可直接使用,很好的实战dome,推荐下载
  • 前端调用接口

    千次阅读 2020-11-17 22:12:44
    调用接口 jquery的ajax 使用方法 案例调用的接口 get请求 post请求 在接口中调用接口 fetch 案例调用的接口 案例 axios 使用方法 vue-resource jquery的ajax 该方法是 jQuery 底层 AJAX 实现。$.ajax() 返回其创建的...
  • 前端如何调用后端接口?有哪几种方式?

    万次阅读 多人点赞 2020-01-09 16:44:18
    首先,要弄清楚前端提供一个接口或者调用后台接口,那么这个接口具体指什么?网上用户上传图片作为头像这个需求需要后台人员处理,当用户登录 修改自己个人信息的时候,上传了头像。此时,后台处...
  • 文件一:前端模板文件news.html。 用于嵌套php语句加载数据库内容后生产news.htmls静态... 文章首页 ... 使用ajax请求的数据 ...$.ajax({ //接口地址 url:'http://static.com/api/hot.php', //请求方式 type:'get
  • 在html 里如何用Ajax 调用接口,如图片所示,这样写可以吗?只在html 中写就可以调用了吗? ![图片说明](https://img-ask.csdn.net/upload/201701/06/1483663479_62425.png)![图片说明]...
  • js ajax调用rest接口

    千次阅读 2017-10-31 19:04:08
    var _init = function(){ $.ajax({ url :ip:port/restname, dataType :'json', // type : "POST", async : false, success : function(result) {
  • 前端JS Ajax 调用Java Axis的 web服务

    千次阅读 2013-07-26 13:06:21
    /* 此方法为Ajax 调用Java Axis的web服务,调用举例如下: callAxisWsPost("远程方法名", new Array("参数名1","参数名2"...), new Array(参数值1,参数值2...), "wsdl地址", "命名空间", function (result
  • 主要介绍了Django使用AJAX调用自己写的API接口的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前端调用支付接口

    2019-09-04 11:05:07
    jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function () { $.ajax({ url: "", method: "POST", dataType: "json", ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,773
精华内容 17,509
关键字:

前端ajax调用接口