jQuery实现ajax跨域请求

jsonp形式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./jquery.js"></script>
</head>
<style>* {padding: 0;margin: 0;}#box {margin: 100px;}#wd {width: 400px;height: 40px;}#list {display: none;width: 400px;border: 1px solid #ccc;}li {list-style: none;padding: 5px;}a {text-decoration: none;color: #333;}
</style><body><div id="box"><input type="text" id="wd"><ul id="list"></ul></div><script>// 原生js写法   var oInput = document.getElementsByTagName('input')[0];var oList = document.getElementById('list');// 标签创建形式// function doJson(data) {//     var dataArr = data.g;//     oList.innerHTML = '';//     if (dataArr.length == 0) {//         oList.style.display = 'none';//     } else {//         dataArr.forEach(function (ele) {         //             oLi = document.createElement('li');//             oA = document.createElement('a');//             oA.href = 'https://www.baidu.com/s?wd=' + ele.q;//             oA.innerHTML = ele.q;//             oLi.appendChild(oA);//             oList.appendChild(oLi);//             oList.style.display = 'block';//         });//     }// }// 字符串拼接形式function doJson(data) {    // 回调函数处理数据 注意此函数需要写在ajax前面         var dataArr = data.result;oList.innerHTML = '';str = '';if (dataArr.length == 0) {oList.style.display = 'none';} else {dataArr.forEach(function (ele, index) {if (index > 3) return;str += '<li><a href="https://www.baidu.com/s?wd=' + ele[0] + ' " target = "_blank">' +ele[0]+ '</a></li>';});oList.innerHTML = str;oList.style.display = 'block';}}oInput.oninput = function () {var value = this.value;$.ajax({url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + value,type: 'GET',             dataType: "jsonp",         // jsonp形式实现跨域jsonpCallback: 'doJson',   //设置回调函数})}</script></body></html>

jQuery实现ajax跨域请求相关推荐

jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内 ...
JQuery的Ajax跨域请求的解决方案
JQuery的Ajax跨域请求的解决方案参考文章: (1)JQuery的Ajax跨域请求的解决方案 (2)https://www.cnblogs.com/amylis_chen/p/4703735. ...
ajax+php跨域请求数据库,基于jQuery的ajax跨域请求，PHP作为服务器端代码
ajax实现跨域请求有两种方式: 方法一:jsonp的方式 jsonp方式的关键点在客户请求以jsonp作为数据类型,服务器端接收jsonp的回调函数,并通过回调函数进行数据的传输.具体代码如下: 客 ...
jQuery中ajax跨域请求
背景介绍: 现在做的课题要实现在一个没有部署在服务器上的网页中,使用ajax来加载已经部署在服务器上的一个服务提供的数据. 先看静态页面的代码: <html><head>&l ...
js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jq中ajax请求跨域,用JQuery实现简单的Ajax跨域请求
前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章,这几天看了一下Jquery,发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本) ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
jQuery ajax跨域请求的解决方法
jQuery ajax跨域请求的解决方法参考文章: (1)jQuery ajax跨域请求的解决方法 (2)https://www.cnblogs.com/freeweb/p/4908832.html ...

jQuery实现ajax跨域请求

jQuery实现ajax跨域请求相关推荐

最新文章

热门文章