zoukankan      html  css  js  c++  java
  • 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
    }
  • 相关阅读:
    手写堆排序和归并排序
    海量数据处理
    HDU 1532 --&&-- POJ1273 dinic 算法
    POJ 3159 最短路 SPFA
    POJ 1459 网络流 EK算法
    8.14比赛j题 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#overview
    单链表---邻接表
    poj 1273 ---&&--- hdu 1532 最大流模板
    HDU 2603 二分匹配
    UVA 796 连通图求桥
  • 原文地址:https://www.cnblogs.com/zhaojinhui/p/3935271.html
Copyright © 2011-2022 走看看