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调用的更多相关文章
- jQuery简单的Ajax调用示例
jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...
- 模拟jQuery简单封装ajax
/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...
- 最简单的ajax调用webservice
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHelloWorld ...
- jquery 封装的ajax调用
(function(){ var Ploy = { Config: { ajaxUrl: "/ajax/ploy.ashx" ...
- Jquery ajax调用后台aspx后台文件方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- 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代码方式来 ...
- jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding
Jquery ajax调用WCF服务 例子效果如下:原界面 点击按钮GetList get后,通过指定的Url获取数据添加到table 新建一个控制台项目,添加IContract.cs,DBServi ...
- JQuery ajax调用一直回调error函数
使用jquery的ajax调用,发现一直回调error函数,ajax调用代码如下,后台返回是正确的,为什么会报错呢? var descValue = $('#descEditArea').val() ...
随机推荐
- 自测之Lesson10：管道
题目:建立双向管道,实现:父进程向子进程传送一个字符串,子进程对该字符串进行处理(小写字母转为大写字母)后再传回父进程. 实现代码: #include <stdio.h> #include ...
- 自测之Lesson5：标准I/O
题目:使用perror函数和strerror函数编写一个程序. 程序代码: #include <stdio.h> #include <errno.h> #include < ...
- 2017软工第二次作业 - 本周PSP（补交）
每周例行报告 1.本周PSP 2. 本周进度条 3.累计进度图 4. 本周PSP饼状图
- iOS开发CAAnimation类动画, CATransition动画
#pragma mark - CAAnimation类.实现动画 #pragma mark ** CABasicAnimation 动画 - (IBAction)handleCABasicAnimat ...
- TCP系列12—重传—2、Linux超时重传引入示例
在前面我们概述了TCP的超时重传之后我们简单的看一下tcp超时重传的示例.首先简单的描述一下测试过程 1.设置/proc/sys/net/ipv4/tcp_early_retrans为2,关掉TLP功 ...
- oracle 时间段内的所有行时间
获取一段时间内所有的小时 SELECT to_date('2013-07-01 12', 'yyyy-mm-dd hh24') + (ROWNUM - 1) / 24 sdate FROM dualC ...
- QObject类 moc处理后代码
QObject在QT中是所有类的基类,经过MOC处理后代码如下 之所以贴出这段代码,是因为很多流程追踪到最后一些关键性函数都是出自这个类 源码 4.8.6 MOC版本 63 /************ ...
- Android基础------SQLite数据库(一)
1.SQLite介绍 SQLite是一款非常流行的嵌入式数据库,它支持SQL操作,并且只用很少的内存. Android在运行时集成了SQLite,所有每个Android应用程序都可以使用SQLLite ...
- Activiti5工作流笔记四
排他网关(ExclusiveGateWay) 流程图 部署流程定义+启动流程实例 查询我的个人任务 完成我的个人任务 并行网关(parallelGateWay) 流程图 部署流程定义+启动流程实例 查 ...
- Python 断言和异常
Python 断言和异常 Python断言 断言是一种理智检查,当程序的测试完成,可以将其打开或关闭.断言的最简单方法就是把它比作raise-if语句(或更加准确,raise-if-not声明).一个 ...