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请求服务器,并返回信息，请求过程中不需要跳转页面的更多相关文章

  1. Node.js创建服务器和模拟客户端请求

    1. 何为服务器 服务器是某种长期运行,等待请求资源的应用程序 2. 常见Web应用架构 3. 如何创建web服务器 Web服务器是使用HTTP协议,等待客户端连接后请求资源的驻守应用程序:HTTP协 ...

  2. Mui.ajax请求服务器正确返回json数据格式

    ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...

  3. 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 编译器错误消息: 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 ...

  4. ajax请求Controller，返回信息乱码问题

    参考:https://blog.csdn.net/hgg923/article/details/53610548 @RequestMapping(value = "changeMobile& ...

  5. 用C语言制作小型商品信息管理系统过程中的问题

    大神请默默飘过... 以下是第一次制作时的源码: // 商品信息管理.cpp : 定义控制台应用程序的入口点. // // 小型商品信息管理系统.cpp : 定义控制台应用程序的入口点. // #in ...

  6. NetCore部署到Linux服务器+Supervisor的步骤及过程中踩过的坑

    本文作备忘使用 服务器配置: 下面是所有操作的具体步骤: 1.安装nginx   参考 1.1 添加源:默认情况Centos7中没有Nginx源,最近Nginx官网提供了Centos的源地址. sud ...

  7. 利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

    上效果图: #先看生成随机迷宫的代码吧↓ <html> <head> <title>生成随机迷宫v1.0</title> </head> & ...

  8. 在APP开发设计过程中：如何设计启动页面？

    心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒.所以初次见面所展示的形象真的很重要.同理,用户在使用APP时,每 ...

  9. Windows 10 安装过程中，在自定义登录页面进入审核模式

    按ctrl-f3进入审核模式 https://msdn.microsoft.com/zh-cn/windows/hardware/commercialize/manufacture/desktop/b ...

随机推荐

  1. USACO2012 overplanting /// 矩阵切割 递归 oj21547

    题目大意: 在农场的任何一个“轴向对齐”的长方形区域(即垂直和水平方向)种植草坪. 现种植了N(1≤ N ≤10)个不同的矩形区域,其中一些甚至可能重叠. Input Multiple test ca ...

  2. webapi 给自己挖的坑

    这次做项目,负责开发web api. 自己给自己挖了个坑.在所有的api接口前面都加上一个static . 结果检查路由配置.代码等等都找不到问题所在. 最后在一个同事的提醒下,原来是static给惹 ...

  3. [HDU3333]Turing Tree

    莫队模板题... 不过树状数组也可以做...跟HH的项链几乎一模一样,离线询问,然后记录前缀,更新的时候把前缀删掉就好了,然而这题开long long,卡空间 //hgs AK IOI,IMO,ICH ...

  4. Razor页面之添加TagHelper

    1.右键项目-----添加------新建项 2.创建Razor试图导入 (Razor View  Imports) 3.在创建的_ViewImports.cshtml中添加 @AddTagHelpe ...

  5. Kotlin Download

    { https://github.com/JetBrains/kotlin/releases/tag/v1.3.50 }

  6. Go 逻辑运算符

    Go 逻辑运算符 package main import "fmt" func main() { var a bool = true var b bool = false if ( ...

  7. 判断访问浏览器客户端类型(pc,mac,ipad,iphone,android)

    <script type="text/javascript"> //平台.设备和操作系统 var system = { win: false, mac: false, ...

  8. NX二次开发-UFUN删除链表函数UF_MODL_delete_list

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...

  9. Photon Server的Unity3D客户端配置

    Photon Server与Unity3D的交互分为3篇博文实现 (1)Photon Server的服务器端配置 (2)Photon Server的Unity3D客户端配置 (3)Photon Ser ...

  10. params拦截器

    1. params拦截器首先给action中的相关参数赋值,如id  2. prepare拦截器执行prepare方法,prepare方法中会根据参数,如id,去调用业务逻辑,设置model对象   ...