JS请求服务器,并返回信息，请求过程中不需要跳转页面
js请求服务器,并返回信息，请求过程中不需要跳转页面
这个可以通过jQuery框架轻松实现，jQuery中包含多种ajax的请求方式，详细可以参考下对应 的API。
你上面定义的按钮类型是submit，如果是在form当中，将会自动提交当前form表单，建议，如果可能的话将其修改为button类型。
下面给出通过jQuery的$.post方式，异步获取服务器的JSON数据。
功能代码：
<script type="text/javascript">
$(function(){
// 定义存放服务器返回值的变量
var jsonData = null;
$('#submitBtn').click(function(){
// 请求的参数
var params = {};
$.post('json.json', params, function(data){
// 这里data就是返回的JSON对象
jsonData = data;
alert(jsonData.name);
}, 'json');
});
});
</script>
完整代码：
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src=" <script type="text/javascript">
$(function(){
// 定义存放服务器返回值的变量
var jsonData = null;
$('#submitBtn').click(function(){
// 请求的参数
var params = {};
$.post('json.json', params, function(data){
// 这里data就是返回的JSON对象
jsonData = data;
alert(jsonData.name);
}, 'json');
});
});
</script>
</head>
<body>
<div>
<input type="button" value="提交" id="submitBtn"/>
</div>
</body>
</html>
json.json文件内容：
{
"name" : "Steven",
"sex" : "Male",
"age" : 10
}
JS请求服务器,并返回信息，请求过程中不需要跳转页面的更多相关文章
- Node.js创建服务器和模拟客户端请求
1. 何为服务器 服务器是某种长期运行,等待请求资源的应用程序 2. 常见Web应用架构 3. 如何创建web服务器 Web服务器是使用HTTP协议,等待客户端连接后请求资源的驻守应用程序:HTTP协 ...
- Mui.ajax请求服务器正确返回json数据格式
ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...
- 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\41c191fd\ff9345c5\App_Web_login.cshtml.65793277
本地开发环境没问题,但是发布到服务器出现问题或则直接在IIS上修改东西就给我抛出以下错误: 未能写入输出文件"c:\Windows\Microsoft.NET\Framework64 \v4 ...
- ajax请求Controller，返回信息乱码问题
参考:https://blog.csdn.net/hgg923/article/details/53610548 @RequestMapping(value = "changeMobile& ...
- 用C语言制作小型商品信息管理系统过程中的问题
大神请默默飘过... 以下是第一次制作时的源码: // 商品信息管理.cpp : 定义控制台应用程序的入口点. // // 小型商品信息管理系统.cpp : 定义控制台应用程序的入口点. // #in ...
- NetCore部署到Linux服务器+Supervisor的步骤及过程中踩过的坑
本文作备忘使用 服务器配置: 下面是所有操作的具体步骤: 1.安装nginx 参考 1.1 添加源:默认情况Centos7中没有Nginx源,最近Nginx官网提供了Centos的源地址. sud ...
- 利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情
上效果图: #先看生成随机迷宫的代码吧↓ <html> <head> <title>生成随机迷宫v1.0</title> </head> & ...
- 在APP开发设计过程中：如何设计启动页面？
心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒.所以初次见面所展示的形象真的很重要.同理,用户在使用APP时,每 ...
- Windows 10 安装过程中，在自定义登录页面进入审核模式
按ctrl-f3进入审核模式 https://msdn.microsoft.com/zh-cn/windows/hardware/commercialize/manufacture/desktop/b ...
随机推荐
- 找到最大或者最小的N个元素
heapq模块中的两个函数nlargest()和nsmallest() import heapq nums = [1,5,6,458,6,787,5,45,6] print(heapq.nlarges ...
- PL SQL 存储过程 SQL SERVER创建存储过程及调用，Oracle创建存储过程及调用
Oracle使用存储过程实例: 例1: //查出表字段赋值给存储过程变量 create proc proc_stu @sname varchar(20), //默认是输入参数(input),另外还有两 ...
- 小程序登录时如何获取input框中的内容
最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...
- Java标识符&关键字
1. 标识符&关键字 [标识符]: Java 对各种变量.方法和类等要素命名时使用的字符序列称为标识符. 凡是自己可以起名字的地方都叫标识符 命名规则:(一定要遵守,不遵守就会报编译的错误) ...
- 依赖背包优化——hdu1561
傻逼依赖背包的优化 #include<bits/stdc++.h> using namespace std; #define N 205 ]; int head[N],tot,n,m,a[ ...
- cdh maven仓库地址
常用的maven仓库地址: 中央库:http://repo.maven.apache.org/maven2/ cdh库:https://repository.cloudera.com/artifact ...
- NX二次开发-UFUN所有对象类型的宏定义
/**************************************************************************** Copyright (c) 2010 Sie ...
- C++之string
一.常用操作 二.用“+”连接字符串的注意事项
- elasticsearch配置文件
配置Elasticsearch的集群名称,默认是elasticsearch,Elasticsearch会自动发现在同一网段下的Elasticsearch 节点,如果在同一网段下有多个集群,就可以用这个 ...
- 6.4 Data Types
Table 6-1 lists the size, representation, and range of each scalar data type for the C28x compiler. ...