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. Go学习笔记：初识Go语言

    Go语言简介 Go语言是Google(谷歌)公司开发的一款静态型.编译型并自带垃圾回收机制和并发的编程语言. Go语言的风格类似于C语言.其语法在C语言的基础上进行了大幅的简化,去掉了不需要的表达式括 ...

  2. vue实现京东动态楼层效果

    页面效果如下 <template> <div> <h1>首页</h1> <section class="floor-nav" ...

  3. 使用Thread创建线程

    #_author:来童星#date:2019/12/17#使用Thread创建线程import threadingimport timeclass Sunthread(threading.Thread ...

  4. Lua的控制流程

    一.条件语句 if语句 if语句是由一个布尔表达式作为条件判断,或者紧跟其他语句组成. if else语句 if语句可以是else搭配使用,在if条件表达式为false时执行else语句代码 if嵌套 ...

  5. NXOpenC#_Training_cam(cn)【转载】

  6. 牛客多校第八场 C CDMA 线性代数：沃尔什矩阵

    题意: 构造出一个由1和-1组成的$2^k*2^k$的矩阵,使得矩阵任意两列内积为0 题解: 数学知识,沃尔什矩阵.沃尔什矩阵的特性被CDMA(码分多址)采用,使得编码成为无线信号的频段和振幅之外的第 ...

  7. A1075 PAT Judge (25 分)

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  8. oracle 管理表空间

    表空间:是oracle数据库中最大的逻辑存储结构,与操作系统中的数据文件相对应,用于存储数据库中用户创建的所有内容 表空间>数据文件 4.1创建一个永久性表空间myspace create ta ...

  9. 20-MySQL-Ubuntu-数据表的查询-子查询(九)

    子查询(嵌套查询) select * from students where height=(select max(height) from students);

  10. USACO 2011 November Cow Lineup /// map set 尺取法 oj25279

    题目大意: 输入n 接下来n行描述n头牛的编号num和品种id 得到包含所有id的最短段 输出最短段的编号差 Sample Input 625 726 115 122 320 130 1 Sample ...