jsonpクロスドメインリクエストdata_jqueryを使用した携帯電話番号クエリの分析例
この記事の例では、jsonp クロスドメイン リクエスト データを使用して携帯電話番号クエリを実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
はしがき
インターネット上にはオープン API が多数あり、ajax を介してローカルでデータを取得すると、必ず問題が発生します。それがクロスドメインです。 PHP などを使用しない場合、JS だけでクロスドメインの問題を解決するにはどうすればよいでしょうか。おそらく jsonp が良い選択かもしれません。
知識の準備
前の記事「JSON と JSONP について話しましょう。突然理解できるかもしれません 」で jsonp について詳しく紹介していますので、ここでは紹介しません。
コード:
<!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>
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7621
15
1389
52
89
11
31
136
PHP セッションのクロスドメイン問題の解決策
Oct 12, 2023 pm 03:00 PM
PHPSession のクロスドメイン問題の解決策 フロントエンドとバックエンドの分離の開発では、クロスドメイン要求が標準になっています。クロスドメインの問題に対処するときは、通常、セッションの使用と管理が必要になります。ただし、ブラウザーのオリジンポリシーの制限により、デフォルトではセッションをドメイン間で共有できません。この問題を解決するには、いくつかの技術と方法を使用して、セッションのクロスドメイン共有を実現する必要があります。 1. ドメイン間でセッションを共有するための Cookie の最も一般的な使用法
Vue でクロスドメインリクエストを行うにはどうすればよいですか?
Jun 10, 2023 pm 10:30 PM
Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue を使用してアプリケーションを開発する場合、多くの場合、異なるサーバー上にあるさまざまな API と対話する必要があります。クロスドメイン セキュリティ ポリシーの制限により、Vue アプリケーションが 1 つのドメイン名で実行されている場合、別のドメイン名の API と直接通信することはできません。この記事では、Vue でクロスドメイン リクエストを行うためのいくつかの方法を紹介します。 1. プロキシを使用する 一般的なクロスドメイン ソリューションは、プロキシを使用することです。
Flask-CORS を使用してクロスドメインのリソース共有を実現する方法
Aug 02, 2023 pm 02:03 PM
Flask-CORS を使用してクロスドメイン リソース共有を実現する方法 はじめに: ネットワーク アプリケーション開発において、クロスドメイン リソース共有 (CrossOriginResourceSharing、CORS と呼ばれる) は、サーバーが指定されたソースまたはドメイン名とリソースを共有できるようにするメカニズムです。 CORS を使用すると、異なるドメイン間のデータ送信を柔軟に制御し、安全で信頼性の高いクロスドメイン アクセスを実現できます。この記事では、Flask-CORS 拡張ライブラリを使用して CORS 機能を実装する方法を紹介します。
JSONP を使用して Vue でクロスドメイン リクエストを実装する方法
Oct 15, 2023 pm 03:52 PM
JSONP を使用して Vue でクロスドメイン リクエストを実装する方法の紹介 同一オリジン ポリシーの制限により、クロスドメイン リクエストを行う際にフロントエンドがある程度妨げられます。 JSONP (JSONwithPadding) はクロスドメイン リクエスト メソッドです。<script> タグの特性を使用して、<script> タグを動的に作成することでクロスドメイン リクエストを実装し、応答データをそのパラメータとして返します。コールバック関数。この記事ではVueでJSONPを使う方法を詳しく紹介します。
HTML で画像とキャンバスのクロスドメイン使用を許可するにはどうすればよいですか?
Aug 30, 2023 pm 04:25 PM
画像とキャンバスをドメイン間で使用できるようにするには、サーバーの HTTP 応答に適切な CORS (Cross-Origin Resource Sharing) ヘッダーを含める必要があります。これらのヘッダーを設定して、特定のソースまたはメソッドを許可したり、任意のソースがリソースにアクセスできるようにしたりすることができます。 HTML キャンバスHTML5 キャンバスは、JavaScript コードによって制御される Web ページ上の長方形の領域です。画像、図形、テキスト、アニメーションなど、あらゆるものをキャンバス上に描画できます。キャンバスは同意します。
Vue テクノロジー開発で遭遇するクロスドメインの問題とその解決策
Oct 08, 2023 pm 09:36 PM
Vue テクノロジーの開発中に遭遇するクロスドメインの問題と解決策 概要: この記事では、Vue テクノロジーの開発中に遭遇する可能性のあるクロスドメインの問題と解決策を紹介します。まずクロスオリジンの原因から始めて、次にいくつかの一般的な解決策を取り上げ、具体的なコード例を示します。 1. クロスドメイン問題の原因 Web 開発では、ブラウザのセキュリティ ポリシーにより、ブラウザは、あるソース (ドメイン、プロトコル、またはポート) から別のソースのリソースに対するリクエストを制限します。これはいわゆる「同一生成元ポリシー」です。 Vue テクノロジーを開発しているとき、フロントエンドと
Beego フレームワークで CORS を使用してクロスドメインの問題を解決する
Jun 04, 2023 pm 07:40 PM
Web アプリケーションの開発とインターネットのグローバル化に伴い、クロスドメイン要求を行う必要があるアプリケーションがますます増えています。クロスドメインリクエストはフロントエンド開発者にとって一般的な問題であり、アプリケーションが適切に動作しなくなる可能性があります。この場合、クロスオリジンリクエストの問題を解決する最良の方法の 1 つは、CORS を使用することです。この記事では、Beego フレームワークで CORS を使用してクロスドメインの問題を解決する方法に焦点を当てます。クロスドメインリクエストとは何ですか? Web アプリケーションでは、クロスドメイン リクエストとは、あるドメイン名の Web ページから別のドメイン名の Web ページへのリクエストを指します。
PHP セッションのクロスドメインおよびクロスプラットフォームの互換性処理
Oct 12, 2023 am 09:46 AM
PHPSession のクロスドメインおよびクロスプラットフォームの互換性処理 Web アプリケーションの開発に伴い、クロスドメインの問題に直面する開発者が増えています。クロスドメインとは、あるドメイン名の Web ページが別のドメイン名のリソースを要求することを指し、特にセッション (Session) 管理を伴うアプリケーションの場合、開発の難易度がある程度高くなります。この記事では、PHP でクロスドメイン セッション管理を処理する方法を紹介し、いくつかの具体的なコード例を示します。セッション管理は私たちです
