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. null == null 或者 [] == [] 或者{} == {} 或者alert（1|| 2） 或者alert（1&& 2） 结果及原理

    相信面试的小伙伴们都会遇到此头大的问题,是不是很想骂一句面试官:你白痴啊,鬼都用不着的东西拿来问,你还别说,这些看似用不着的东西却包含着最基础的原理,那我们来理一理. 1.alert(1||2)和 a ...

  2. what codes does sudo command do in Linux?

    sometime, to make your change of configuration file be effective to web application, we have to rest ...

  3. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  4. D3.js 弦生成器(V3版本)

    弦生成器(Chord Generator)   弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAn ...

  5. cocos构建的android项目的返回键相应

    @Override public boolean dispatchKeyEvent(KeyEvent event) { //返回键 cocosActivity不相应onbackPressed和onKe ...

  6. oracle运维（持续更新）

    目录 简单命令使用 进入SQL*Plus 退出SQL*Plus 在sqlplus下得到帮助信息 显示表结构命令 DESCRIBE SQL*Plus 中的编辑命令 调用外部系统编辑器 运行命令文件 关于 ...

  7. [转]Netty入门(最简单的Netty客户端/服务器程序)

    Java中的NIO是一种解决阻塞式IO问题的基本技术,但是NIO的编写对java程序员是有比较高的要求的.那么Netty就是一种简化操作的一个成熟的网络IO编程框架.这里简单介绍一个程序,代码是< ...

  8. Java高新技术第三篇:注解的使用

    我们知道注解是在JDK1.5引入的,可能有的人没有用过注解,所以感觉注解这个东西没有什么用,但是深入了解注解,对以后学习框架有所帮助的,后面提到的JavaWeb的框架中很多都是基于注解的技术, 其实注 ...

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

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

  10. 带你走进webpack世界，成为webpack头号玩家。

    最近朋友圈被<头号玩家>刷爆了,斯皮尔伯格一个资深电影导演,把对过去经典的致敬,对未来的憧憬浓缩在这一部电影中,可以说让观众燃了起来. 观望整个前端开发,不断的演化,发展迅速.前端开发从最 ...