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. 2019寒假训练营寒假作业（三） MOOC的网络空间安全概论笔记部分

    目录 第五章 网络攻防技术 5.1:网络信息收集技术--网络踩点 信息收集的必要性及内容 网络信息收集技术 网络踩点(Footprinting) 网络踩点常用手段 5.2:网络信息收集技术 --网络扫 ...

  2. Alpha-2

    前言 失心疯病源2 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 17:30~21:30 又测试了一些算法和代码,时间不能再拖下去了,要尽快进入代码阶段,决 ...

  3. MFC加速键

    添加的函数:    } // 解释说明    MFC对话框不自动处理加速键,你必须自己编写代码来做这件事情.为了理解弄清楚这是为什么,让我们回首Windows开发的历程,在使用C和原始的Windows ...

  4. iOS开发跳转指定页面

    for (UIViewController *VC in self.navigationController.viewControllers) { if ([VC isKindOfClass:[Car ...

  5. thrift多平台安装

    thrift支持多语言的RPC,一直都想深入学习了解thrift,最近有空,就上网查了些资料,学习了一下,对它的使用有了一些了解.本篇是写thrift的安装,使用方法会另起一篇来写. 本文使用thri ...

  6. 3dContactPointAnnotationTool开发日志（十）

      要是那几个状态栏不能拖动的话岂不是显得太呆板了,于是我又参考Unity官方视频教程学习了如何实现拖动状态栏的功能,还挺简单的.   比如说要拖动这个PanelStatus面板,我只让使用者通过拖动 ...

  7. 对alpha发布的总结技术随笔

    对于今天的alpha发布,首先需要自我检讨,因为我们组没有展示作品.主要的原因还是我们投入的时间不足.我们的项目是约跑App,首先选择做安卓平台的东西,我们大家都需要熟悉新的开发软件Android S ...

  8. 【week3】psp （技术随笔）

    本周psp: 随笔字数: 总计 累计代码行 (前两项为单元测试部分) 词频统计:87 四则运算:49 四人小组:39 175 随笔字数 (不包含代码字数) 词频统计:237 四则运算:125 四人小组 ...

  9. wine update错误 "the cache has no package" error when wine update is available

    网址:https://bugs.launchpad.net/pipelight/+bug/1318321/

  10. [计算机网络-传输层] 无连接传输：UDP

    UDP(用户数据报协议) 下面是UDP的报文段格式: 可以看出UDP的首部长度是固定的,共64bit,即8个字节. 校验和:提供了差错检测得功能,即用于确定当UDP报文段从源到达目的时,其中的比特是否 ...