首頁 > web前端 > js教程 > jquery和ajax實現省市區三級連動封裝和不封裝兩種方式

jquery和ajax實現省市區三級連動封裝和不封裝兩種方式

小云云
發布: 2018-01-12 09:26:30
原創
2327 人瀏覽過

本文主要為大家詳細介紹了jquery+ajax實現省市區三級連動的相關代碼,包括封裝和不封裝兩種方式,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助大家。

首先,要實現如下圖效果,

1、要理清思路:

先做出三個下拉式選單- ---根據第一個下拉式選單的value值取得第二個下拉清單的內容,第三個同理。

2、用到的資料庫表:Chinastates表

#規則:根據國家級(中國)的areacode查詢省級(如:北京) ;根據省級的areacode查詢市級(如:北京市轄);根據市級的areacode查詢區級(如東城區)

第一種方式:沒有用到封裝,資料讀取較慢,可以看看原理,這樣在第二種方式封裝時就容易多了。

程式碼如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title></title>

 <script src="../jquery-1.11.2.min.js"></script>

 </head>

 <body>

 <select id="sheng"></select>

 <select id="shi"></select>

 <select id="qu"></select>

 </body>

</html>

<script type="text/javascript">

 $(document).ready(function(e){

 //输出省

 var code = "0001";

 $.ajax({

  async:false,

  //取消异步

  url:"chuli.php",

  data:{code:code},

  type:"POST",

  dataType:"TEXT",

  success:function(data){   

   var hang = data.trim().split("|"); //trim()去空格

   var str="";

   for(var i=0;i<hang.length;i++)

   {

   var lie = hang[i].split("^");

   str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";

   }

   $("#sheng").html(str); 

  }  

 });

//输出市

 $("#sheng").click(function(){

 var code2=$("#sheng").val();

  

 $.ajax({

  async:false,

  url:"chuli.php",

  data:{code:code2},

  type:"POST",

  dataType:"TEXT",

 success:function(data2){

  

  var hang2 = data2.trim().split("|");

  

  var str2 ="";

  for(var i=0;i<hang2.length;i++)

  {

   var lie2=hang2[i].split("^");

   str2 = str2 +"<option value =&#39;"+lie2[0]+"&#39;>"+lie2[1]+"</option>";

  }

  $("#shi").html(str2);

  

 });

 })

//输出区县

$("#shi").click(function(){

 var code3=$("#shi").val();

  

 $.ajax({

  async:false,

  url:"chuli.php",

  data:{code:code3},

  type:"POST",

  dataType:"TEXT",

  success:function(data3){

  var hang3 = data3.split("|");

  var str3 ="";

  for(var i=0;i<hang3.length;i++)

  {

   var lie3=hang3[i].split("^");

   str3 = str3 +"<option value =&#39;"+lie3[0]+"&#39;>"+lie3[1]+"</option>";

  }

  $("#qu").html(str3);

  

 });

 })

})

</script>  

登入後複製

期間出現的問題:每個下拉清單的第一個資料輸不出來:是因為每個下拉清單的第一個資料的value值都帶有空格! ! !所以在輸出data時要去空格! ! !

data傳回的值可能帶有空格換行等,所以要用trim()方法去空格! ! !

第二種方式:封裝成插件,以後可以隨時呼叫(重要)

(1)主頁:


1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title></title><br>//引入jquery包

 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件

 <script src="sanji.js"></script>

 </head>

 <body><br>//id要与封装的js插件中一致

 <p id="sanji"></p>

 </body>

</html>

登入後複製

(2)我們自己封裝的js外掛程式


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

$(document).ready(function(e){

 //扔三个下拉列表到主页面建的p中

 $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>");

 //加载省的数据

 LoadSheng();

 //加载市的数据

 LoadShi();

 //加载区的数据

 LoadQu();

 //给省的下拉列表添加点击事件,当省变化时,对应的市和区会发生变化

 $("#sheng").click(function(){

 LoadShi();

 LoadQu();

 })

 //给市的下拉列表添加点击事件,当市变化时,对应的区发生变化

 $("#shi").click(function(){

 LoadQu();

 })

  

});

 

//加载省的下拉列表

function LoadSheng() {

 var pcode = "0001";

 $.ajax({

 async: false,

 url: "chuli.php",

 data: { code: pcode },

 type: "POST",

 dataType: "TEXT",

 success: function(data) {

  var hang = data.trim().split("|");

  var str = "";

  for(var i = 0; i < hang.length; i++) {

  var lie = hang[i].split("^");

  str = str + "<option value=&#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";

  }

  $("#sheng").html(str);

 }

 });

}

 

//加载市省的下拉列表

function LoadShi() {

 var pcode = $("#sheng").val();

 $.ajax({

 async: false,

 url: "chuli.php",

 data: { code: pcode },

 type: "POST",

 dataType: "TEXT",

 success: function(data) {

  var hang = data.trim().split("|");

  var str = "";

  for(var i = 0; i < hang.length; i++) {

  var lie = hang[i].split("^");

  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";

  }

  $("#shi").html(str);

 }

 });

}

 

//加载省的下拉列表

function LoadQu() {

 var pcode = $("#shi").val();

 $.ajax({

 url: "chuli.php",

 data: { code: pcode },

 type: "POST",

 dataType: "TEXT",

 success: function(data) {

  var hang = data.trim().split("|");

  var str = "";

  for(var i = 0; i < hang.length; i++) {

  var lie = hang[i].split("^");

  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";

  }

  $("#qu").html(str);

 }

 });

}  

登入後複製

 其次就是處理頁面(兩種方法都用到的):chuli. php


1

2

3

4

5

6

7

<?php

$code=$_POST["code"];

require "DB.class.php";

$db=new DB();

$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$code}&#39;";

$str=$db->strquery($sql);

echo $str;

登入後複製

最後就是封裝的類別檔案:DB.class.php


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function strquery($sql)

 {

 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

 $result = $db ->query($sql);

 $arr =$result->fetch_all();

 $str="";

 foreach($arr as $v)

 {

 $str=$str.implode("^",$v)."|";

  }

 $str = substr($str,0,strlen($str)-1);

 return $str;

  }

}

?>

登入後複製

相關推薦:

Jquery、Ajax、xml實作三級連動選單效果

ajax三級聯動的實作方法

#用vue.js模仿京東省市區三級連動的選擇元件

以上是jquery和ajax實現省市區三級連動封裝和不封裝兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
引入jQuery 文件
來自於 1970-01-01 08:00:00
0
0
0
jquery筆記哪裡有下?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎麼引入jquery
來自於 1970-01-01 08:00:00
0
0
0
php+jquery的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板