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调用的更多相关文章

  1. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  2. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  3. 最简单的ajax调用webservice

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHelloWorld ...

  4. jquery 封装的ajax调用

    (function(){    var Ploy = {        Config: {            ajaxUrl: "/ajax/ploy.ashx"        ...

  5. Jquery ajax调用后台aspx后台文件方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下 ...

  6. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  7. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  8. jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding

    Jquery ajax调用WCF服务 例子效果如下:原界面 点击按钮GetList get后,通过指定的Url获取数据添加到table 新建一个控制台项目,添加IContract.cs,DBServi ...

  9. JQuery ajax调用一直回调error函数

    使用jquery的ajax调用,发现一直回调error函数,ajax调用代码如下,后台返回是正确的,为什么会报错呢?  var descValue = $('#descEditArea').val() ...

随机推荐

  1. Right-BICEP要求四则2的测试用例

    测试方法:Right-BICEP 测试计划 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有真分数? ...

  2. oracle数据库中常见的操作语句（一）

    一 创建表空间 create tablespace lfdc_data logging datafile 'D:\Database\lfdc_data.dbf' size 50m autoextend ...

  3. Java常用类之File类

    File 类: 1. java.io.File 类代表系统文件名(路径名.文件名); 2. File 类常见的构造方法: 2.1. File(String pathname):通过将给定路径名字符串转 ...

  4. mysql 重置 root 密码

    mysqld_safe --skip-grant-tables & UPDATE mysql.user SET authentication_string=PASSWORD('mima') W ...

  5. md5和base64加密解密

    import java.io.IOException; import java.security.MessageDigest; import sun.misc.BASE64Encoder; impor ...

  6. BZOJ4300 绝世好题（动态规划）

    设f[i][j]为前i个数中所选择的最后一个数在第j位上为1时的最长序列长度,转移显然. #include<iostream> #include<cstdio> #includ ...

  7. P4035 [JSOI2008]球形空间产生器

    题目描述 有一个球形空间产生器能够在 nn 维空间中产生一个坚硬的球体.现在,你被困在了这个 nn 维球体中,你只知道球面上 n+1n+1 个点的坐标,你需要以最快的速度确定这个 nn 维球体的球心坐 ...

  8. 解析Fetch实现请求数据

    一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetc ...

  9. Android Fragment 使用详解

    虽然网上有很多关于Fragment的文章,但我这里还是要写这篇笔记,因为我在编写程序的过程中发现了一个问题,至今未解决,希望得到大家的帮助: PS:当我在Fragment中定义一个名为setIndex ...

  10. BZOJ5157 & 洛谷3970：[TJOI2014]上升子序列——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5157 https://www.luogu.org/problemnew/show/P3970 给定 ...