ホームページ > 記事 > ウェブフロントエンド > Ajax は 3 レベルの連携という最も基本的な概念を実現します
Ajax は 3 レベルの連携という最も基本的な概念を実現します
- php中世界最好的语言オリジナル
- 2018-04-02 14:55:511398ブラウズ
今回は、ajax の 3 層連携を実現するための最も基本的な概念について説明します。 ajax が 3 層連携を実現するための 注意事項 について、実際の事例を見てみましょう。
この記事の例では、3 レベルのリンクを実現するための ajax の具体的なコードを共有します。具体的な内容は次のとおりです
1. まず、将来の参照方法を容易にするためにページに p を配置します
<body> <p id="sanji">//p的id为“sanji” </p>
2。 Sanji jsの処理ページ
$(document).ready(function(){
//向p里面放三个下拉菜单
var str = "<select id='sheng'></select>
<select id='shi'></select>
<select id='qu'></select>";
//给三个下拉列表定义 str 变量
$("#sanji").html(str);
FillSheng();
FillShi();
FillQu();//Sheng Shi Qu的逻辑顺序
$("#sheng").change(function(){
FillShi();
FillQu();
})//给sheng菜单添加点击事件
$("#shi").change(function(){
FillQu();
})//给shi菜单添加点击事件
});//页面加载完成之后过来执行某些代码
3.shengの埋め込みメソッド
function FillSheng()
{
var pcode = "";//定义一个变量
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success:function(data){
var hang = data.split("^");
str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
});
}
3.quliの埋め込みメソッド
function FillShi()
{
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
の事例を読んで、メソッドを習得したと思います。この記事については、中国の Web サイトの php のその他の関連記事に注目してください。
推奨読書:
JS は AJAX 部分更新を実装します (コード付き)以上がAjax は 3 レベルの連携という最も基本的な概念を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。