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() ...
随机推荐
- 第十九次ScrumMeeting会议
第十九次Scrum Meeting 时间:2017/12/9 地点:三公寓大厅 人员:蔡帜 王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 赵晓宇 照片: 目前工作进展 名字 今日 明天的工作 蔡帜 ...
- 软工1816 · Alpha冲刺（4/10）
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 完成菜品信息的标定.量化以及整理成csv的任务 接下来的计划 & ...
- java连接数据库的两种方法总结
方法一:使用jdbc-odbc桥连接sql server,作为中间媒介连接数据库 1.配置数据源:打开控制面版->管理工具->数据源(ODBC)->选用户DSN,按下添加按钮-> ...
- ACM 第二天
A - Mishka and Contest Mishka started participating in a programming contest. There are n problems i ...
- lintcode-184-最大数
184-最大数 给出一组非负整数,重新排列他们的顺序把他们组成一个最大的整数. 注意事项 最后的结果可能很大,所以我们返回一个字符串来代替这个整数. #### 样例 给出 [1, 20, 23, 4, ...
- lintcode-15-全排列
全排列 给定一个数字列表,返回其所有可能的排列. 注意事项 你可以假设没有重复数字. 样例 给出一个列表[1,2,3],其全排列为: [ [1,2,3], [1,3,2], [2,1,3], [2,3 ...
- 什么是RESTFUL协议？
1,restful是Representational State Transfer的缩写,翻译过来是表现层状态转移.我的理解是去掉访问文件的格式,比如去掉文件为html的.html,而是采用路径的方式 ...
- Jmeter系列-webdriver代码范例
范例 WDS.sampleResult.sampleStart() try{ //打开博客首页 WDS.browser.get('http://xqtesting.blog.51cto.com') / ...
- JAVA的泛型与反射的联合应用
通过泛型与反射的结合,可以编写框架来使开发更容易,这里演示的是BaseDao部分的简单使用. BaseDao部分代码: public abstract class BaseDao<T>{ ...
- BZOJ4196：[NOI2015]软件包管理器——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=4196 https://www.luogu.org/problemnew/show/P2146 你决定 ...