Home > Article > Web Front-end > Ajax realizes the most basic concept of three-level linkage
Ajax realizes the most basic concept of three-level linkage
- php中世界最好的语言Original
- 2018-04-02 14:55:511337browse
This time I will bring you the most basic concept of ajax to achieve three-level linkage. What are the precautions for ajax to achieve three-level linkage. The following is a practical case, let's take a look.
The example in this article shares the specific code of ajax to achieve three-level linkage for your reference. The specific content is as follows
1. First, place a p on a page to facilitate future reference methods
<body> <p id="sanji">//p的id为“sanji” </p>
2.sanji js processing page
$(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.Fill sheng method
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);
});
}
2.Fill shi method
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);
}
});
}
3.Fill qu method
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
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>";
}
$("#qu").html(str);
}
});
}
4.chuli page
<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS implements AJAX partial refresh (with code)
Two methods for Ajax optimized page refresh
The above is the detailed content of Ajax realizes the most basic concept of three-level linkage. For more information, please follow other related articles on the PHP Chinese website!