jQueryはjsonpを使って百度の検索を実現する例示的なコードです。
プロジェクトの実現:Baiduの検索機能を復元する。
プロジェクトの原理:Jsonのフィードバックページを利用して参。
jsonpとは、「script」タグのsrcアドレスを利用して、ターゲットページをローカルページに戻し、パラメータを持ち込んで、クロスドメインの問題を解決しました。
コードは以下の通りです
html(cssコードは提供されません)ここの目標ページは「https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=22084_1436_13548_21120_22036_220733&req=2&csor=0&cb=calback"はBaiduサーバに を要求します。 calback関数は対象サーバのコールバック関数であり、伝えられたパラメータdataは対象である。 calbackコールバック関数では、伝えられたdataの中のs属性は検索された内容であり、data.s配列を巡回し、各要素の外層にaタグを追加し、aタグのハイパーリンクは検索された内容であり、 aタグのハイパーリンクのwd属性を変更すると、対応するコンテンツが検索されます。wd着信値はエンコーディング処理が必要で、サーバが対応コンテンツのハイパーリンクを与えることができます。
日常のBaiduの検索はwd属性があります。wd属性を変更すれば検索できます。
最終効果:
以上はjQueryを使ってjsonpを使ってBaiduの検索を実現した例コードの詳細です。jQueryについてBaiduの検索を実現した資料は他の関連記事に注目してください。
プロジェクトの原理:Jsonのフィードバックページを利用して参。
jsonpとは、「script」タグのsrcアドレスを利用して、ターゲットページをローカルページに戻し、パラメータを持ち込んで、クロスドメインの問題を解決しました。
コードは以下の通りです
html(cssコードは提供されません)
<div class="box">
<input type="text" />
<div class="ssk"></div>
<button>×</button>
</div>
js。
var script,ids;
$(".box>input").on("input",inputHandler)
function inputHandler(e){
if (ids) return;
ids = setTimeout(function () {//
clearTimeout(ids);
ids=0;
if (script) { // script
script.remove();
script = null;
}
script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
${$(".box>input").val()} &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback`
).appendTo("body");
// x , button
$("button").click(function () {
$("input").val("");
$("button").css("display", "none");
});
// x
if ($("input").val().length === 0) {
$("button").css("display", "none");
} else {
$("button").css("display", "block");
}
}, 500);
}
function callback(data) {
if (data) {
$(".box>.ssk").css("display", "block");
}
//
if ($(".ssk").children().length !== 0) {
$("a").remove();
}
//
$.each(data.s, function (index, item) {
$("<a>"+item+"</a>").appendTo(".box>.ssk");
$("a").attr('href','https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&wd='+encodeURIComponent(item));
});
//
$(".box>.ssk").on("mouseleave", function () {
$(".box>.ssk").css("display", "none");
});
}
最終効果:
以上はjQueryを使ってjsonpを使ってBaiduの検索を実現した例コードの詳細です。jQueryについてBaiduの検索を実現した資料は他の関連記事に注目してください。