html +ajax,html5的ajax学习（实战篇）-CSDN博客

本文介绍了百度智能搜索的实时提醒功能实现，以及如何使用jQuery进行数据解析和键盘事件监听。重点展示了利用$.ajax获取并处理JSONP数据的方法，并深入讲解了jQuery的$.each遍历数组和JSON对象的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、百度的智能搜索提醒

6c1af209fb14

2016-07-26_08-05-31.gif

二、代码

百度

#sug{

position: relative;

margin-top: 100px;

width: 200px;

height: 400px;

margin-left: 200px;

background-color: aquamarine;

}

#keyWord{

position: absolute;

margin-left: 5px;

margin-top: 10px;

}

#btn{

position: absolute;

margin-left: 138px;

margin-top: 12px;

}

li{

list-style: none;

}

#list{

position: absolute;

margin-top: 35px;

margin-left: 1px;

margin-right: 0;

background-color: lightgray;

}

#list ul li{

margin-left: -35px;

margin-right: 0;

}

$(function () {

$('#keyWord').keyup(function (e) {

var kd = $('#keyWord').val();

alert(kd);

var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kd;

querySUG(url);

});

function querySUG (url) {

document.getElementById('list').innerHTML = '';

$.ajax({

type:"get",

async:true,

url:url,

dataType:"jsonp",

jsonp:"cb",

// jsonCallback:"callback",

success:function (data) {

//解析方法1

// var tag = '

// for(var i = 0;i < data.s.length;i++){

// tag += '

'+data.s[i]+'';

// }

// tag += '

// $('#list').html(tag).show();

// $('#list').find('li').hover(function () {

// $(this).css('background', 'lightGreen');

// },function(){

// $(this).css('background', 'lightGray');

// });

//解析方法2

var ul = $("

$.each(data.s,function (i,element) {

var ele = $("

").append(element);

$(ul).append(ele);

});

$("#list").append(ul);

error:function () {

console.log('fail');

}

})

}

三、jquery的遍历方法

1.普通数组

var arr1 = [0, 3, 5];

$.each(arr1,function (i) {

alert(arr1[i]);

});

结果:0，3，5

2.json对象

var jsonData = {"tom": 20, "jerry": 21 };

$.each(jsonData,function (key, value) {

alert(key + "_" + value);

});

结果:tom_20, jerry_21

$.each(jsonData,function (i) {

alert(jsonData[i]);

});

结果:20,21

3.json对象数组($.getJSON里面常用)

var jsonArray = [ { "tom": 20, "jerry": 21 }, { "tom": 22,"jerry": 23} ];

$.each(jsonArray,function (i) {

alert(jsonArray[i].tom);

});

结果:20,22

遍历参考:IT徐胖子的专栏http://blog.csdn.net/woshixuye/article/details/7416949