精华内容
下载资源
问答
  • 可定需要查看淘宝界面的结构,按F12查看网页,此时先清除一下网页中的数据,让Network制空,随后在输入框中输入新的内容,比如钱包,数据中会出现新的数据。点击及查看蓝色方框中的内容 点击之后,你可以查看要...

    可定需要查看淘宝界面的结构,按F12查看网页,此时先清除一下网页中的数据,让Network制空,随后在输入框中输入新的内容,比如钱包,数据中会出现新的数据。点击及查看蓝色方框中的内容


    点击之后,你可以查看要访问的地址,及响应的结果


    从第二步访问到的路由地址,会是我们调用的接口,如下图;


    最后响应给我们的结果就是第三步的内容,下面是我给的源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./Pycharm/jq/1.5.2/jquery-1.5.2.min.js"></script>
    </head>
    <body>
    <input type="text" value="">
    <ul></ul>
    <script>
        $(function () {
            $("input").keyup(function () {
                var $v = $(this).val();
                $.ajax({
                    type:"post",
                    url:"https://suggest.taobao.com/sug?code=utf-8&callback=jsonp392&k=1&area=c2c&bucketid=20",
                    data:{
                        q:$v
                    },
                    async:false,
                    dataType:"jsonp",
    					success:function(res){
    						console.log(res);
    						$("ul").empty();
    						$.each(res.result,function(i,v){
    							var $li = $("<li>");
    							console.log(i)
                                console.log(v)
    							$li.html(v[0]);
    							$li.appendTo($("ul"));
    						})
    					}
                })
            })
        })
    </script>
    
    </body>
    </html>

    说明:对于第二步,复制的请求地址:

    https://suggest.taobao.com/sug?code=utf-8&q=qian&_ksTS=1517635754012_391&callback=jsonp392&k=1&area=c2c&bucketid=20中,在代码中将&q=qian&_ksTS=1517635754012_391去除,应为后续会用ajax继续传送ajax的值,

    而对于请求地址,也可以这样写
    url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",

    对于jsonp:

    JSONP(json with Padding)是json的一种使用模式,可用于解决主流的浏览器跨域数据访问的问题。(不支持post请求)

    核心:通过script标签的src属性,进行域名的包装来完成跨域请求数据的而访问,src来模拟数据的来源,通过和要访问的服务器域名一致,进行同源数据的访问,间接实现跨域数据的访问

    Json和jsonp的区别:

    json是一种数据格式,jsonp是数据访问的方式

    原生js跨域:原生js中,通过动态增加script标签,指定src属性进行数据的跨域访问

    另加一个以前编写的,这个不需要修改jq地址,jq是一个地址,可以直接使用,如下:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    		<style>
    			input{
    				width:400px;
    				height: 40px;
    			}
    			ul{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    				width: 400px;
    			}
    			ul li{
    				height: 38px;
    				width:100%;
    				line-height: 38px;
    				border-bottom:1px dotted #ccc;
    			}
    		</style>
    	</head>
    	<body>
    		<!--https://suggest.taobao.com/sug?code=utf-8&q=aaa&callback=jsonp876-->
    		<input type="text" value=""/>
    		<ul>
    		</ul>
    	</body>
    	<script>
    		$(function(){
    			$("input").keyup(function(){
    				var $v = $(this).val();
    				$.ajax({
    					type:"post",
    					url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",
    					async:true,
    					data:{
    						q:$v
    					},
    					dataType:"jsonp",
    					success:function(res){
    						console.log(res);
    						$("ul").empty();
    						$.each(res.result,function(i,v){
    							var $li = $("<li>");
    							console.log(i)
                                console.log(v)
    							$li.html(v[0]);
    							$li.appendTo($("ul"));
    						})
    					}
    				});
    			});
    		});
    	</script>
    </html>

    结果:

    展开全文
  • // 2)发送ajax请求,并将关键词发送给后端 document.getElementById('btn').onclick = function(){ var keyword = document.getElementById('txt').value; var xhr = new XMLHttpRequest(); xhr....
    <?php
    // echo $_GET['key'];
    $key = $_GET['key'];
    
    $sql = "select * from ali_admin where admin_email like '%$key%'";
    echo $sql;
    //学会排错步骤,排错方法,
     die();
    
     
    $conn = mysql_connect('localhost','root','root');
    mysql_select_db('test');
    mysql_query('set names utf8');
    $resource = mysql_query($sql);
    // print_r(mysql_fetch_assoc($resource));
    // die();
    $arr = [];
    while ($row = mysql_fetch_assoc($resource)){
    	array_push($arr,$row);
    }
    echo json_encode($arr);
    // print_r($arr);
    ?>

     

     

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    <input type="text" name="name" id="txt">
    <input type="button" value="搜索" id="btn">
    <table border="1" width="600">
    	<thead>
    		<tr>
    			<td>id</td>
    			<td>邮箱</td>
    			<td>昵称</td>
    			<td>年龄</td>
    			<td>性别</td>
    		</tr>
    	</thead>
    	<tbody id="tb">
    		
    	</tbody>
    </table>
    <script type="text/javascript">
    // 1.在搜索按钮上绑定点击事件
    // 2.事件函数
    // 1)获取关键词
    // 2)发送ajax请求,并将关键词发送给后端
    document.getElementById('btn').onclick = function(){
    	var keyword = document.getElementById('txt').value;
    	var xhr = new XMLHttpRequest();
    	
    	xhr.onreadystatechange = function(){
    		if(xhr.readyState==4&&xhr.status==200){
    			//console.log(xhr.responseText);排错时用console.log()控制台打印结果
    
    			//return;//排错时用return返回值,截止代码执行。
    
    
    			// var json_arr = JSON.parse(xhr.responseText);
    			
    			// console.log(json_arr);
    			var str='';
    			for(var i = 0; i < json_arr.length; i++){
    				str += '<tr>';
    				str += '<td>' + json_arr[i].admin_id + '</td>';
    				str += '<td>' + json_arr[i].admin_email + '</td>';
    				str += '<td>' + json_arr[i].admin_nickname + '</td>';
    				str += '<td>' + json_arr[i].admin_age + '</td>';
    				str += '<td>' + json_arr[i].admin_gender + '</td>';
    				str += '</tr>';
    			}
    			document.getElementById('tb').innerHTML = str;
    		}
    	}
    	xhr.open('get','index.php?key='+keyword+'&_='+Math.random());
    	xhr.send();
    }
    </script>
    </body>
    </html>

     

    展开全文
  • //查看可看到对象中有属性s是包含10个关联词的数组,用obj.s获取到数组的内容 for (var i = 0; i ; i++) { //用for循环遍历li列表一次把数组中的值打印对应的li标签内 oLi[i].innerHTML = obj.s[i]; }; ...
    <!DOCTYPE HTML >
    <html>
     <head>
      <title> 百度一下,你就知道 </title>
      <meta charset="utf-8">
          <style type="text/css">
              .nav{
    		      margin-top:20px;
    			  text-align:right;
    		     
    		  }  
    		  .nav a{
    		      font-size:13px;
    		      font-weight:bold;
    			  color:black;
    		  }
    		  .nav .light{
    		      font-weight:normal;
    		  }
    		  .nav .more{
    				font-size:13px;
    				color:white;
    				background-color:#3385ff;
    				display:inline-block;
    				width:60px;
    				height:23px;
    				padding:3px;
    				text-align:center;
    				line-height:23px;
    		  }
    		  .lg{
    				margin-top:15px;				
    			    text-align:center;
    		  }
    		  .lg img{
    				width:270px;
    				height:129px;
    				
    		  }
    		  .srch{
    				width:643px;
    				margin:50px auto;
    				text-align:center;
    				margin-top:22px;
    		  }
    		  .srch .ipt{
    				height:30px;
    				width:539px;
    				float:left;
    				
    				outline:medium;
    		  }
    		  .srch .btn{
    				height:36px;
    				width:100px;
    				background-color:#3385ff;
    				border:none;
    				color:white;
    				font-size:14px;
    				float:left;
    				
    		  }
    		  .ept{
    				height:240px;
    		  }
    		  .about{
    				text-align:center;
    				font-size:11px;
    				margin-bottom:10px;
    		  }
    		  .about a{
    				color:blue;
    		  }
    		  .cp p{
    				text-align:center;
    				font:12px arial;
    				color:gray;
    		  }
    		  .cp p a{
    				font:12px;
    				color:gray;
    		  }
    		  .cp p .icon{
    				width: 14px;
    				height: 17px;
    				display: inline-block;
    				overflow: hidden;
    				background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_45de3f02.png) no-repeat;
    				background-position: -600px -96px;
    				position: relative;
    				top: 3px;	  
    		  }
    		  #ul{
    		  	list-style: none;
    		  	border:1px solid gray;
    		  	width: 541px;
    		  	padding: 0;//消除ul列表默认的左内边距
    		  }
    		  #ul li{
    		  	/*width: 539px;*/
    		  	margin-left: 0;
    		  	text-align: left;
    		  }
    		
          </style>
     </head>
    
     <body>
         <div class="nav">
    	     <a href="">新闻</a> 
    		 <a href="">hao123</a> 
    		 <a href="">地图</a> 
    		 <a href="">视频</a> 
    		 <a href="">贴吧</a> 
    		 <a href="" class="light">登录</a> 
    		 <a href="" class="light">设置</a> 
    		 <span class="more">更多产品</span> 
    	 </div>
    	 <div class="lg">
    	     <img src="logo1.png" alt="百度logo">
    	 </div>
    	 <div class="srch">
    	     <input type="text" class="ipt" id="inpt" /><input type="button" value="百度一下" class="btn" />
    	     <ul id="ul">
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     	<li></li>
    	     </ul>
         </div>
    	 <div class="ept"></div>
    	 <div class="about">
    			<a href="">把百度设为首页</a> 
    			<a href="">关于百度</a> 
    			<a href="">About Baidu</a>
    	 </div>
    		<div class="cp">
    			<p>&copy;2015 Baidu 
    				<a href="">使用百度前必读</a>
    				<a href="">意见反馈</a> 京ICP证030173号<i class="icon"></i>
    			</p>
    		</div>
    
    <script>
    	var oInpt = document.getElementById("inpt");
    	var oLi = document.getElementsByTagName('li');
    <span style="white-space:pre">	</span>//使用oninput事件,输入内容后立即触发
    	oInpt.oninput = function(){        
    		var xhr = new XMLHttpRequest();
    		xhr.open("GET","http://180.76.185.227/php/baidu.php?keyword=" + oInpt.value,true);
    		xhr.send(null);
    		xhr.onload = function(){
    			var obj = JSON.parse(xhr.responseText);//把获取的字符串转换成<u><span style="color:#ff0000;">JSON对象</span></u>
    			console.log(obj.s);   //查看可看到对象中有属性s是包含10个关联词的数组,用obj.s获取到数组的内容
    			for (var i = 0; i < obj.s.length; i++) { //用for循环遍历li列表一次把数组中的值打印对应的li标签内
    				oLi[i].innerHTML = obj.s[i];
    			};
    		}
    
    	}
    	//用两个for循环做出鼠标移入li标签上自动改变背景色的效果
    	for (var i = 0; i < oLi.length; i++) {  
    		
    		oLi[i].onmouseover = function(){
    				for (var i = 0; i < oLi.length; i++) {
    					oLi[i].style.background = "";
    				};
    				this.style.background = "gray";
    			}
    	};
    	
    </script>
     </body>
    </html>
    

    展开全文
  • Select2-Ajax获取数据

    千次阅读 2017-06-21 22:09:14
    遇到一个需求: 在前端使用Select2设计一个联想输入dropdown, 通过Ajax动态抓取数据如果用纯H5来实现极其简单, 这里需要用Select2插件来实现可以也使用H5原生onChange来进行动态提交但是这太愚蠢了, 现成的Select有更...

    文章最初发表于szhshp的第三边境研究所
    转载请注明

    遇到一个需求: 在前端使用Select2设计一个联想输入dropdown, 通过Ajax动态抓取数据

    如果用纯H5来实现极其简单, 这里需要用Select2插件来实现

    可以也使用H5原生onChange来进行动态提交但是这太愚蠢了, 现成的Select有更好的API啊

    花了俩小时完成了这个功能, 官方Doc说的很是模糊..

    代码细节:

    $('select').select2({
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        data: function (params) {
          var query = { //请求的参数, 关键字和搜索条件之类的
            search: params.term //select搜索框里面的value
          }
    
          // Query paramters will be ?search=[term]&page=[page]
          return query;
        },
        delay: 1500,
        processResults: function (data, params) {
          //返回的选项必须处理成以下格式
          //var results =  [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
    
          return {
            results: results  //必须赋值给results并且必须返回一个obj
          };
        }
    
      }
    });
    

    参考文献

    http://select2.github.io/options.html

    http://select2.github.io/examples.html#data-array

    展开全文
  • ajax常用参数:1、url 请求地址2、type 请求方式,默认是'GET',常用的还有'POST'3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'4、data 设置发送给服务器的数据5、success 设置请求成功...
  • 如题,用ajax获取一篇文章,文章中有换行符!p标签等等!因此导致获取到的数据无法显示, 通过ajax的error获取到的错误信息 错误类型:parsererror 原因:SyntaxError:未结束的字符串常量 请问这种问题该如何解决呢 ?
  • ajax 与 Angular 中的 this 关键字冲突,在 ajax 中使用 Angular 的 this 之前,需要将其赋值给另一个不同名变量(如 _this),以区分于 ajax 中的 this。 二、实例 getPatients() { let _this = this; $.ajax({ ...
  • Struts2+AJAX获取json数据

    千次阅读 2016-02-01 10:33:35
    昨天晚上遇到了一个bug,是ajax调用struts2里面的方法获取json的问题,虽然现在那个问题没有解决,但是各种百度后,发现对stuts2跟ajax的交互认识又深了。 一,如果设置Action返回的结果为json类型 如上图,如果要...
  • 因为是要将服务器获取数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板 2.服务器的准备 服务器要准备好渲染到页面的数据 3.页面的操作 这里我做的的是一个搜索框提示功能 讲解都在代码...
  • 因为是要将服务器获取数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板 2.服务器的准备 服务器要准备好渲染到页面的数据 3.页面的操作 这里我做的的是一个搜索框提示功能 讲解都在代码...
  • 1.准备因为是要将服务器获取数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板2.服务器的准备服务器要准备好渲染到页面的数据3.页面的操作这里我做的的是一个搜索框提示功能 讲解都在...
  • ajax获取所有数据,前台分页,搜索

    千次阅读 2017-02-27 10:21:33
    所以前台会获取所有的数据,然后进行前台分页。关键字查询也是因为上述原因,用的是js自带的indexOf()方法。使用的插件和方法: 1. ajax 2. handlerbars模板引擎 3. jquery插件开发过程代码结构如下:html代码:...
  • ajax获取后台数据+spring MVC

    千次阅读 2016-01-04 15:38:47
    控制层通过map向前台传递数据 如:triggerList和size两个 @RequestMapping(value="/host/getTrigger", method = RequestMethod.POST ) @ResponseBody  public Map getTrigger(Integer templateId , Integer hostId)...
  • 当我们使用控制器利用Ajax获取表单数据时,调试为null,这时看看你接受表单时定义的参数名字是否为action 其实不能起这个名字的,这个名字和控制器关键字冲突了 随便换个其它名字就好了,比如我起个aaa
  • //two AJAX获取数据方式 //$("select[name='xuewei_id']").select2({ /*$(".downList2").select2({ ajax: { type:'GET', url: '/erzhentang/manage/forAjax.do?requestType=12.5_1', // url: ...
  • select2简单使用(含ajax获取数据

    千次阅读 2017-11-01 18:39:49
     placeholder: '请输入关键字',  escapeMarkup: function (markup) { return markup; }, // 字符转义处理  minimumInputLength: 1,  templateResult: formatRepo,//返回结果回调function formatRepo(repo){...
  • 有一个地区的联动获取功能,通过传递父id,显示子地区 后台代码 :get_ares.jsp <% int pid=RequestUtil.getInt(request,"pid"); ArrayList list=(ArrayList)DaoFactory.getLpAreaDao().getList(tot_wxid, pid...
  • Ajax是现在使用非常广泛的一种技术,它在不重新刷新整个页面的情况下实现了客户端与服务器端的动态交互和页面内容变更。基于上述特性,在使用RobotFramework对Ajax进行测试的时候就需要一些特殊的操作。下面举一个...
  • vue从后台获取的seo关键字标题描述,怎么通过router放到对应的meta里边呢?标题使用固定的已经实现,接口也已经获取数据,不知道该怎么做,求大佬解答
  • AJAX请求数据_demo

    万次阅读 2016-11-12 11:28:40
    本篇列举三个demo: 1、用ajax请求json格式数据(javascript) ...页面只有实现两个功能(用get请求-获取数据 & 用post请求-设置修改数据)三个demo页面布局如下: 员工查询</h1><label>请输入员工编号: <input typ
  • 在第一篇文章中,我总结了最近学到的利用requests和bs4第三方库共同作用,基本可以应对python获取静态网页数据的相关问题。但是如果现实中的网页往往比想象中复杂的多,网页也早已不再是纯静态网页。 因此,本文对...
  • springboot+mybatis+thymeleaf+ajax+mysql实现异步获取数据 配置所需要的pom文件 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifact...
  • layui 数据表格实现关键字搜索

    千次阅读 2019-08-29 22:30:06
    //执行关键字搜索的函数 $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });  php后台:   // 获取单页...
  • 2,ajax获取后台(数据库)数据 3,java语言环境SpringMVC 4,修改Autocomplete再带下拉框样式,添加滚动条, 键入关键字: 选择对应数据: 引入js文件: <link rel="stylesheet" href=...
  • $.ajax()方法从服务器获取json数据几种方式详解

    万次阅读 多人点赞 2017-06-10 10:45:36
    对$.ajax()方法从服务器获取json数据的几种方式进行详解
  • 使用jQuery $.ajax()我希望能够通过数据字段从输入中传递数组和“关键字”。下面的代码已设定关键字从SEARCH_INPUT作为可变dataString$.ajax({type: "GET",url: "core/functions/searchdata.php",data: dataString,/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,938
精华内容 10,775
关键字:

ajax获取数据关键字