Rumah > hujung hadapan web > tutorial js > ajax怎么实现提示输入信息的功能

ajax怎么实现提示输入信息的功能

php中世界最好的语言
Lepaskan: 2018-03-30 17:31:06
asal
1488 orang telah melayarinya

这次给大家带来ajax怎么实现提示输入信息的功能,ajax实现提示输入信息功能的注意事项有哪些,下面就是实战案例,一起来看一下。

本文实例为大家分享了ajax实现输入提示效果的具体代码,供大家参考,具体内容如下

网站主页

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    *{

      margin:0px auto;

      padding:0px;

    }

    .l{

      height:50px;

      width:198px;

      border-bottom:1px solid black;

      text-align: center;

      line-height:40px;

      vertical-align: middle;

    }

  </style>

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

</head>

<body>

<p style="height: 50px;width: 200px"><input type="text" id="name" style="width: 198px;height: 48px;"></p>

<p id="list" style="height: 500px;width: 200px;border: 1px solid black">

<!--<p id="l">zhongguo</p>-->

</p>

</body>

</html>

<script>

$("#name").keyup(function () {

  var n = $("#name").val();

  if (n != ""){

  $.ajax({

    url:'ltchuli.php',

    data:{n:n},

    type:'post',

//    dataType:'text',

    dataType:'json',

    success:function (data) {

//text写法

//     var s = data.split("|");

//     var str = "";

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

//     {

//       str = str + "<p class=&#39;l&#39;>" +s[i] +"</p>";

//     }

//     $("#list").html(str);

//json写法

      for (var i in data){

        $("#list").append("<p class=&#39;l&#39;>" +data[i] +"</p>");

      }

    }

  });

}else {

    $("#list").html("");

  }

})

</script>

Salin selepas log masuk

处理页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<?php

/**

 * Created by fcc

 * User: Administrator

 * Date: 2017/10/30

 * Time: 9:52

 */

$n = $_POST[&#39;n&#39;];

require_once "../wenjian/DBDA.class.php";

$db = new DBDA();

$obj = "select region_name from region WHERE region_name LIKE &#39;%{$n}%&#39; ";

$data = $db->Query($obj);

//echo $data;

echo json_encode($data);

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

实现无刷新下拉联动的Ajax+Servlet(附代码)

怎样用Ajax异步检查用户名有无重复

Atas ialah kandungan terperinci ajax怎么实现提示输入信息的功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan