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. Spring入门（二）

    Spring IOC&DI 控制反转(inversion of control):控制什么?什么反转? 我们都知道,传统的程序中,如果A类需要使用B类对象,会在程序中直接创建B类对象实例,此时 ...

  2. Mysql ibd恢复

    一,binlog恢复,这里就不说了. 二,ibd方式其实很简单, 生成数据结构(有的可以跳过) 1,创建一个新库 2,新库里新建一个表,名字和回复的表一样. 字段数量一样(字段类型和名字都无所谓) 3 ...

  3. python的一个简单日志记录库glog的使用

    一. glog的简介 glog所记录的日志信息总是记录到标准的stderr中,即控制台终端. 每一行日志记录总是会添加一个谷歌风格的前缀,即google-style log prefix, 它的形式如 ...

  4. 笔记52 Mybatis快速入门（三）

    一.更多查询 1.模糊查询 修改Category.xml,提供listCategoryByName查询语句select * from category where name like concat(' ...

  5. Bribing FIPA

    Bribing FIPA 给出多棵有n个节点的有根树,第i个节点有一个权值\(a_i\),定义一个点能控制的点为其所有的子节点和它自己,询问选出若干个点的最少的权值之和,并且能够控制大于等于m个点,\ ...

  6. SpringBoot中使用Scheduling执行定时任务

    SpringBoot自带的 Schedule,可以将它看成一个轻量级的Quartz,而且使用起来比Quartz简单许多 以下任务都是在单线程下执行的 第一步 创建SpringBoot项目 第二步 外汇 ...

  7. protobuf3的学习笔记

    学习protobuf的过程中踩了不少的坑,这篇博文算是一个小结吧! 环境: windows VisualStudio Google.Protobuf.Tools. Google.Protobuf. 其 ...

  8. thinkphp环境要求

    框架本身没有什么特别模块要求,具体的应用系统运行环境要求视开发所涉及的模块.ThinkPHP底层运行的内存消耗极低,而本身的文件大小也是轻量级的,因此不会出现空间和内存占用的瓶颈. PHP版本要求 P ...

  9. bzoj1007题解

    [题意分析] 给你n个上半平面,求包含这些上半平面的交的上半平面. [解题思路] 按斜率排序,用单调栈维护一个下凸壳即可.复杂度O(nlog2n). [参考代码] #include <cctyp ...

  10. HDFS（Hadoop Distributed File System）的组件架构概述

    1.hadoop1.x和hadoop2.x区别 2.组件介绍 HDFS架构概述1)NameNode(nn): 存储文件的元数据,如文件名,文件目录结构,文件属性(生成时间,副本数,文件权限),以及每个 ...