精华内容
下载资源
问答
  • Ajax的跨域

    2017-06-07 10:02:36
    Ajax用于异步更新网页的内容...电商网站 商品类别的更新,在手机目录下通过切换不同的品牌,获取不同品牌的手机信息,页面没有刷新,内容刷新了。 在购物车界面 点击加入购物车,提交到数据库(post方法),在结算界

    Ajax用于异步更新网页的内容,在不更新整个网页的状态下,更新页面某一个模块的内容。

    通常通过对数据库内容的读取获取数据,异步更新状态,也有对数据整合网站的接口api进行数据的获取

    例子:

    电商网站 商品类别的更新,在手机目录下通过切换不同的品牌,获取不同品牌的手机信息,页面没有刷新,内容刷新了。

    在购物车界面 点击加入购物车,提交到数据库(post方法),在结算界面获取购物车的详情(get方法)。

    在Ajax中,有get的方法和post方法

    在jquery中

    Ajax使用的方法为

    $.ajax({
    type:"提交的方式(post/get)",  //使用$.ajax时候必填
    url:"提交的地址",  //提交的地址
    data:{"key1":"value1","key2":"value2"}  ,//传入的内容
    dataType:"类型",  //服务器返回的数据类型(json,jsonp)
    jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
    async:true,//布尔值,是否异步请求,默认true,false为同步
    success:function(obj){
    },//成功请求后的回调函数,obj为服务器传回来的数据
    error:function(obj){
    }//失败请求访问的函数
    })


    GET方法

    $.get({
    type:"提交的方式(post/get)",  //使用$.ajax时候必填,使用get时候不用填写
    url:"提交的地址",  //提交的地址
    data:{"key1":"value1","key2":"value2"}  ,//传入的内容
    dataType:"类型",  //服务器返回的数据类型(json,jsonp)
    jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
    async:true,//布尔值,是否异步请求,默认true,false为同步
    success:function(obj){
    },//成功请求后的回调函数,obj为服务器传回来的数据
    error:function(obj){
    }//失败请求访问的函数
    })

    POSY方法

    $.get({
    type:"提交的方式(post/get)",  //使用$.ajax时候必填,使用get时候不用填写
    url:"提交的地址",  //提交的地址
    data:{"key1":"value1","key2":"value2"}  ,//传入的内容
    dataType:"类型",  //服务器返回的数据类型(json,jsonp)
    jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
    async:true,//布尔值,是否异步请求,默认true,false为同步
    success:function(obj){
    },//成功请求后的回调函数,obj为服务器传回来的数据
    error:function(obj){
    }//失败请求访问的函数
    })


    JS的原生方法

    js的方法有点复杂,但是在没有JQ的情况下也是必须学会掌握的

    getXmlHttpRequest方法

    function getXmlHttpRequest(){
    return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  //判断非IE浏览器和IE浏览器
    }

    定义一个get或者post方法
    /**
    * 处理AJAX的get请求
    * @param(String) url 需要使用AJAX请求的地址
    * @param(Function) success AJAX请求成功时调用的函数
    * @param(Function) fail AJAX请求失败时调用的函数
    */
    function get(url, success, fail){
    ajax('GET', url, null, success, fail);  
    }

    ajax方法本体

    /**
    * 处理AJAX的get/post请求
    * @param(String) method 请求的方式,get或post
    * @param(String) url 需要使用AJAX请求的地址
    * @param(JSON) params POST方式时需要传递到服务器的数据
    * @param(Function) success AJAX请求成功时调用的函数
    * @param(Function) fail AJAX请求失败时调用的函数
    */



    function ajax(method, url, params, success, fail){
    var xml = getXmlHttpRequest();
    xml.onreadystatechange = function(){
    if (xml.readyState == 4){     4
    if (xml.status == 200){
    if(success){
    success(xml.responseText);
    }
    }else{ // 服务器出现错误
    if(fail){
    fail();
    }
    }
    }
    };
    xml.open(method, url, true);
    xml.send();
    }

    xml.readyState 的状态值
     	0 - (未初始化)还没有调用send()方法
      1 - (载入)已调用send()方法,正在发送请求
      2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
      3 - (交互)正在解析响应内容
      4 - (完成)响应内容解析完成,可以在客户端调用了
    xml.status  的状态值

    200——请求成功 
    201——提示知道新文件的URL 
    202——接受和处理、但处理未完成 
    203——返回信息不确定或不完整 
    204——请求收到,但返回信息为空 
    205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件 
    206——服务器已经完成了部分用户的GET请求 

    400——错误请求,如语法错误 
    401——请求授权失败 
    403——请求不允许 
    404——没有发现文件、查询或URl 


    总结

    ajax在前端网页中为十分重要的一环,是网页是否能动态刷新的关键,是一门必须掌握的技术

    展开全文
  • 本文实例讲述了jsonp跨域请求数据实现手机号码查询方法。分享给大家供大家参考,具体如下: 前言 网上很多开放api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果借助php等,仅仅通过...
  •  网上很多开放api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错选择。 知识准备  上篇博客 :JSON和JSONP (含...

    前言

      网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择。

    知识准备

      上篇博客 : JSON和JSONP (含jQuery实例)(转)  对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧

    demo

      代码

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="author" content="@my_coder">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title> 手机号查询 </title>
    <style type="text/css">
    html{color:#000;background:#fff;}
    body,ul,li,input,h1,button,p{padding:0;margin:0;}
    li{list-style:none;}
    
    html{background:#F6F8FC;overflow:hidden;}
    .outer{margin:0 auto;width:280px;position:relative;}
    h1{font-size:20px;text-align:center;border-bottom:1px dotted #A3C4DB;padding:10px 0;}
    p{font-size:14px;padding:14px 0 10px;}
    input[type="text"]{width:200px;height:30px;font-size:18px;}
    .button{display:inline-block;width:60px;font-size:16px;text-align:center;line-height:34px;background:linear-gradient(#fff,#ccc);border:1px solid #004;border-radius:3px;cursor:pointer;}
    ul{padding-top:26px;}
    li {font-size:18px;line-height:30px;}
    .error{position:absolute;left:4px;top:80px;color:red;font-size:14px;display:none;}
    </style>
    </head>
    
    <body>
        
        <h1>手机号码归属地查询</h1>
        <div class="outer">
            <p>请输入手机号码</p>
            <input type="text"  >
            <span class="button">查询</span>
            <span class="error">号码有误 或 无数据</span>
            <ul>
                <li class="num">手机号码: <span></span></li>            
                <li class="province">归属省份: <span></span></li>
                <li class="operators">运 营 商: <span></span></li>
            </ul>
        </div>
    
    
    <script type="text/javascript" src="jquery-1.8.0.min.js" ></script>
    <script>
    
    
        var tel;
        var ajax=function(){
            //淘宝接口    
            $.ajax({
                 type: "get",
                 url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,
                 dataType: "jsonp",
                 jsonp: "callback",
                 success: function(data){
                    console.log(data);
                    $('.error').css('display','none');
                    var province = data.province,
                        operators = data.catName,
                        num = data.telString;
    
                    $('.num span').html(num);
                    $('.province span').html(province);
                    $('.operators span').html(operators);
                 },
                 error:function (){    
                    $('li span').html('');
                    $('.error').css('display','block');        
                 }
             });
        }
        
    
        var reg = /^(13|15|18)[0-9]{9}$/;

    //点击查询 $('.button').click(function(){ tel=$('input[type=text]').val(); if(tel){ if(reg.test(tel)){ ajax(); }else{ $('li span').html(''); $('.error').css('display','block'); } } }); //键盘事件 $(window).keydown(function(event){ tel=$('input[type=text]').val(); if(event.keyCode==13) { if(tel){ if(reg.test(tel)){ ajax(); }else{ $('li span').html(''); $('.error').css('display','block'); } } } }); </script> </body> </html>
    复制代码

     本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/p/3155080.html如需转载请自行联系原作者


    @挨踢前端

     

    展开全文
  • 网上很多开放api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果借助php,java等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错选择。 代码如下: <!DOCTYPE html>...

    网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php,java等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择。

    代码如下:

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script src="js/jquery.min.js"></script>
            <title>手机号码归属地查询</title>
        </head>
        
        <style>
            *{margin: 0;padding: 0;}
            .box{width: 400px;height: 400px;margin: 0 auto;padding: 10px;background: #f3f3f3;}
            .number-input{width: 200px;height: 30px;outline: none;border: 1px solid #ccc;padding-left: 6px;}
            .button{height: 32px;width: 80px;border: none; line-height: 34px;cursor: pointer;margin-left: 30px;}
            p{line-height: 36px;}
            .error{color: red;}
        </style>
        
        <body>
            <div class="box">
                <input type="text" class="number-input" placeholder="请输入手机号"/><button class="button">查询</button>
                <p class="error"></p>
                <p>归属地:<span class="province"></span></p>
                <p>运营商:<span class="catName"></span></p>
                <p>所属公司:<span class="carrier"></span></p>
                <p>手机号码:<span class="telString"></span></p>
            </div>
        </body>
        
        <script type="text/javascript">
            var tel;
            var ajax = function() {
                tel = $('.number-input').val();
                //淘宝接口   
                $.ajax({
                    type: "get",
                    url: '//tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=' + tel,
                    dataType: "jsonp",
                    jsonp: "callback",
                    success: function(data) {
                        $('.error').html('');
                        $('.province').html(data.province);
                        $('.catName').html(data.province);
                        $('.carrier').html(data.province);
                    }
                });
            }
            
            var reg = /^(13|15|18)[0-9]{9}$/;
            //点击查询
            $('.button').click(function() {
                tel = $('.number-input').val();
                if(tel) {
                    if(reg.test(tel)) {
                        ajax();
                    } else {
                        $('.error').html('');
                        $('.error').html('请输入正确的手机号码');
                    }
                }
            });
            
            //键盘事件
            $('.number-input').keydown(function(event) {
                if(event.keyCode == 13) {
                    tel = $('.number-input').val();
                    if(tel) {
                        if(reg.test(tel)) {
                            ajax();
                        } else {
                            $('.error').html('');
                            $('.error').html('请输入正确的手机号码');
                        }
                    }
                }
            });
        </script>
    </html>

     

    转载于:https://www.cnblogs.com/suanshu/p/7347922.html

    展开全文
  • 上次在项目中做一个手机验证码功能时遇到后端set-cookie无法成功问题,相信很多人都会遇到,今天分享出来,算是做个记录,也给需要小伙伴一个参考,下面先说一下场景 手机验证码实现步骤 用户输入手机号并点击...

    跨域set-cookie无效的解决方案

    上次在项目中做一个手机验证码功能时遇到后端set-cookie无法成功的问题,相信很多人都会遇到,今天分享出来,算是做个记录,也给有需要的小伙伴一个参考,下面先说一下场景

    手机验证码实现步骤
    用户输入手机号并点击发送验证码按钮

    此时是向后端服务器发起高请求,传递手机号码
    后端接收到手机号码后通过短信服务商的接口发送短信到手机号

    由于安全性问题,一般服务商的接口都是由后端发起请求,那验证码是怎么来的呢?当然是我们自己后端生成的(一般是生产一个4位或6位随机数字号码),短信接口只负责发送
    用户收到验证码后,在表单中输入并发送验证
    后端收到验证码与第2步生成的进行校验,一致则通过,否则不通过
    问题来了,我们都知道http请求是无状态的,即每个请求都是独立的,两个请求间没有任何联系,但上面的步骤中,用户发起了两次请求(第1步和第3步),后端怎么知道是同一个人呢?万一当时有10个人同时获取验证码,且都执行完所有步骤,怎么实现各自第1和第3步的对应关系进而进行第4步校验?于是我们引入session

    什么是session
    session是保存的服务器的一个数据存储机制,一般用于存储用户状态数据,你可以理解为客户端的cookie,因为它们很像,同样是有key/value和有效时间,只是一个在服务端,一个在客户端。这跟本文有什么关系呢?肯定有关系,关系大了去了,不然我写干嘛(自嗨中~~~)

    咳~咳。。回归正题,刚刚说了http是无状态的,而我们现在又要把第1步和第3步关联起来,怎么关联呢?session+cookie出马,具体原理如下

    第一次接到请求,后关会生成一个sessionid来标识当前会话(我使用express-session来实现),并通过set-cookie响应头在客户端生一个cookie,大概长这样,

    connect.sid=s%3Au9xG34DBU1vOVbIpCax0neMxL_Uc1fIC.4ndNJL5G%2B41DtUSLbQ%2BW75Z9wduOAON4lfu2JGTDe5
    由于cookie会自动发送给服务器,所以当前用户后面的所有请求都会携带这个sessionid给服务器,服务器通过这个sessionid来标识是否为同一个用户,问题就迎刃而解了…
    手机验证码功能具体实现步骤
    前端:

    用户输入手机号,点击获取验证码
    发送请求到后端,
    后端:

    后端生成随机验证码,保存在session,并给前端响应connect.sid(express-session会Set-Cookie响应头)
    并通过手机接口发送给用户手机号(需要后端配置手机短信接口,一般需要购买,这里不做额外说明)
    前端:

    浏览器接收到Set-Cookie响应头后,自动把sessionid写入浏览器cookie
    用户接收到手机验证码并填写到对应输入框
    用户点击按钮发送验证码到后端进行校验(sessionid随cookie自动发送到后端)
    后端:

    后端拿到验证码,并与第3步保存在session的随机验证码进行比较,一致则响应成功,否则响应失败
    通过以上步骤,正常情况下你已经能实现手机验证码功能了,可我偏偏遇到了非正常情况,这也是我今天这篇文章的意义,由于开发阶段为前后端分离,请求是产生了跨域,明明已经正确响应了Set-Cookie,允许了CORS跨域,但浏览器的cookie中就是看不到connect.sid的身影,关键浏览器还不报错。

    于是各种千里寻她千百度,最后发现默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的,同样,后端通过Set-Cookie在跨域时默认是被浏览器忽略的,解决的方案是两步:

    后端设置"Access-Control-Allow-Credentials":true响应头

    PS: 设置该响应头后,Access-Control-Allow-Origin的值不能设置为 *,必须设置为具体域名
    前端发起请求时设置 withCredentials:true 请求头

    // XMLHttpRequest
    const xhr = new XMLHttpRequest();
    xhr.open(‘get’,url,true);
    xhr.withCredentials = true;
    xhr.send()

    // axios
    axios.get(url,{

    withCredentials:true
    })

    // fetch
    fetch(url,{

    credentials: ‘include’
    })

    搞定,收工,希望对你有帮助

    展开全文
  •  网上很多开放api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错选择。  实例运行效果:  源代码: &lt;!...
  • 但是前端就是怎么都传不会来token,前端打包项目或使用postman都可以传入token,唯独pc浏览器模拟手机过来,检查发现前端用浏览器模拟器手机传入是会先请求域请求OPTIONS形式,然后再请求你设置类型GET,POST...
  •  最近一天,对着镜子,发现满脸疲惫、脸色蜡黄、头发蓬松、眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个月眼巴巴等着打在银行 卡里的钱还不够自己的生活费,如同鸡肋食之无味却又弃之可惜,...
  • 最近新进一个公司,做项目是手机支付系统。由于涉及到金钱相关,所以安全性要求特别高。项目分了很多个子系统,在部署(测试)时候是每个Tomcat上面只放一个子系统。比如现在5个子系统,那么就会对应5个...
  •  最近一天,对着镜子,发现满脸疲惫、脸色蜡黄、头发蓬松、眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个月眼巴巴等着打在银行 卡里的钱还不够自己的生活费,如同鸡肋食之无味却又弃之可惜,...
  • 最近新进一个公司,做项目是手机支付系统。由于涉及到金钱相关,所以安全性要求特别高。项目分了很多个子系统,在部署(测试)时候是每个Tomcat上面只放一个子系统。比如现在5个子系统,那么就会对应5个...
  • 目前可以比较好解决方案是使用flash,但是它二个不足,一需要flash插件,如果那位想安装它,那么就无法使用了.如某些手机上,还有flash提交前提是被请求页面需要授权才能使用. 在这提供一个自己写,自动加载swf与...
  • 现在项目,要提供一个对外接口给手机端浏览器访问,由于同域安全策略,浏览器会默认禁止js ajax对该跨域接口访问,原本以为能访问。于是用chrome作为测试浏览器,跨域访问该接口,发现实际上发送了一个...
  • 但是由于时间急,而且这些东西都不是很熟悉,再加上这只是对已web网站mobile化,因此采用了Phonegap+几乎纯server端页面方式,做起来省事多了,但是缺点还是一大堆,这里就细说了。 唠叨之...
  • 跨域访问解决办法之java网络编程

    千次阅读 2011-03-10 12:08:00
    其中一个就是给用户手机发送短信,考虑用ajax实现, 开始时在IE下测试都正常,可是在firefox下怎么都不行,查了查资料才知道firefox安全机制比 IE严格,允许跨域访问。 在页面中嵌入iframe标签来尝试...
  • svg模式渲染存在缺陷,只能渲染普通pdf,带签名、印章可能会渲染全,报错,pdf.js官方目前没有给出解决方案 canvas模式本质是图片,默认进去时候,图片在手机端被缩放,不是原分辨率,所以失真模糊。所以...
  • yii框架跨域传值到laravel,接口调用

    千次阅读 2016-10-12 19:59:16
     随着手机用户越来越多,手机app也成为大家必可少应用软件产品,那么app访问原理是什么呢?肯定不是直接查询数据库啦,那就是现在主流一种方法----调用接口,下面,我就来展示一下怎么调用接口。  前台...
  • 背景分享是传播活动,吸引用户最重要一环。现有分享手段多是题目配合...直接利用手机原生截屏功能会几个问题:内容格式无法自定义。翻页情况无法处理。视窗区域可控。本文通过讨论现有截屏方案和闲鱼内部...
  • video.js支持m3u8格式直播 ... 为什么要使用video.js?...2. 手机端各式各样浏览器定制video界面风格统一,直接写原生js控制视频兼容性较差 3. video.js解决以上两个问题,还可以各种视频状态接口...
  • 因为使用前端类库是jquery,对jsonp封装,直接使用,在PC上没问题,但是在手机上发请求,后台接收到,感觉就是发了请求,然后就被浏览器阻止了。所以jsonp尝试手机上浏览器跨域失败。试过将jsonp请求同一域名...

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

有的手机跨域有的不跨域