jQuery简单的Ajax调用

index.php 的代码如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<!--引入jQuery文件-->

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

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

                 showUser();

               });

        });

    function showUser(){

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

          var sports = $("#selectName").val();

          // alert(a);

          $.ajax({

             url:"server.php",

             type: "POST",

             data: {

                 name:name,

                 sports:sports

             },

             dataType:"html",

             error: function(data){

                 alert("error");

                 console.log(data)

             },

             success: function(data){

                 $('#txtHint').html(data);

                 // alert(data);

             },

         })

     }

</script>

</head>

    <body>

        <form>

          姓名：<input type="text" id="name"><br><br>

          喜欢的运动：<select id="selectName">

                   <option value="0">篮球</option>

                   <option value="1">足球</option>

                   <option value="2">排球</option>

                   <option value="3">桌球</option>

                   <option value="4">乒乓球</option>

                </select>

        </form>

        <br>

        <div id="txtHint">显示内容</div><br>

        <button id="testAjax" type="button">Ajax改变内容</button>

    </body>

</html>

服务器页面 server.php 的代码如下：

<?php

  if($_POST['name'] != "" && $_POST['sports'] != ""){

      switch($_POST['sports']){

          case 0:

             echo $_POST['name']."这小子喜欢篮球";

             break;

          case 1:

             echo $_POST['name']."这小子喜欢足球";

             break;

          case 2:

             echo $_POST['name']."这小子喜欢排球";

             break;

          case 3:

             echo $_POST['name']."这小子喜欢桌球";

             break;

          default:

             echo $_POST['name']."这小子喜欢乒乓球";

      }

  }else{

      echo "请输入姓名和选择喜欢的运动";

  }

?>

运行index.php，将数据用POST方式发送到server.php页面，执行完成后返回并将数据发送回 "txtHint" 占位符，运行结果如下:

巴特西

jQuery简单的Ajax调用

最新文章

热门文章