Ajax は 3 レベルの連携という最も基本的な概念を実現します-jsチュートリアル-php.cn

Ajax は 3 レベルの連携という最も基本的な概念を実現します

php中世界最好的语言

リリース： 2018-04-02 14:55:51

オリジナル

1424 人が閲覧しました

今回は、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=&#39;sheng&#39;></select>
    <select id=&#39;shi&#39;></select>
    <select id=&#39;qu&#39;></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=&#39;"+lie[0]+"&#39;>"+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=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
     }
     $("#shi").html(str);
    }
  });
}

ログイン後にコピー

の事例を読んで、メソッドを習得したと思います。この記事については、中国の Web サイトの php のその他の関連記事に注目してください。

推奨読書:

JS は AJAX 部分更新を実装します (コード付き)

Ajax で最適化されたページ更新のための 2 つの方法

以上がAjax は 3 レベルの連携という最も基本的な概念を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。