1：创建html网页和js文件

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>xx信息查询</title>

</head>

<body>

<div class="main pusher">

    <form class="ui form vertical segment form-search">

        <div class="fields">

            <div class="sixCl wide field js_query_seq">

                <label>订单号</label>

                <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">

            </div>

            <!--https://blog.csdn.net/dreamweaver_zhou/article/details/79203297-->

            <div class="sixCl wide field js_query_btype">

                <label>排序字段</label>

                <select name="sortFiled" id="sortFiled">

                    <option value="order_no">订单号</option>

                </select>

            </div>

            <div>

                <label></label>

                <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>

            </div>

        </div>

    </form>

    <div class="table-container">

        <table class="ui nine column table celled table-result" id="table-result">

            <thead>

            <tr>

                <th>hotelSeq</th>

                <th>酒店名称</th>

            </tr>

            </thead>

            <tbody id="tbody-result">

            </tbody>

        </table>

    </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>

<script type="text/javascript" src="./js/cheatorder.js"></script>

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>-->

</div>

</body>

</html>

js

$(function() {

    $('#btSearch').click(function () {

        var orderNo = $('#orderNo').val();

        var sortFiled = $('#sortFiled').val();

        var tbody=window.document.getElementById("tbody-result");

        $.ajax({

            type: "post",

            dataType: "json",

            url: "/orderTest",

            data: {

                orderNo: orderNo,

                sortFiled: sortFiled

            },

            success: function (msg) {    //请求成功之后的操作

//                if (msg.ret) {

                    var str = "";

//                    var data = msg.data;

                    var data1=msg[0];

//                    for (i in data) {

                        str += "<tr>" +

                        "<td>" + data1.hotelSeq + "</td>" +

                        "<td>" + data1.hotelName + "</td>" +

                        "</tr>";

//                    }

                    tbody.innerHTML = str;

//                }

            },

            error: function () {

                alert("查询失败")

            }

        });

    });

});

2:开启服务，在chrome浏览器中浏览html网页

3：进入开发者模式

4：选择source  ，在浏览器的js代码中打断点

5：点击触发js代码的按钮，进行调试。

6：调试页面

二：html代码中通过js提交表单数据

1.button的type设置为button 而不用submit，并添加onclick方法调用js函数

<input type="button" name="confirmAlter" value="确认修改" onclick="changeInfo(form1.code,form1.name,form1.detail,form1.count)"/>

2.传到js函数中，然后提交表单到servlet并传递参数

<script language="javascript">

function changeInfo(code,name,detail,count){

var string1 = code.value;

var string2 = name.value;

var string3 = detail.value;

var number = count.value;

//alert("hello word!");

document.getElementById('form1').action="workServlet?action=alterInfo&code="+string1+"&name="+string2+"&detail="+string3+"&count="+number;

document.getElementById("form1").submit();

}

</script>

3.在servlet中调用request.getParameter()方法即可获取参数

使用浏览器，调试js代码的更多相关文章

  1. 如何用浏览器调试js代码

    按F12打开调试工具

  2. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...

  3. chrome浏览器调试JS代码

    是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这 ...

  4. 浏览器调试js

    在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我 ...

  5. Firebug调试js代码

    Firebug功能异常强大,不仅可以调试DOM,CSS,还可以调试JS代码,下面介绍一下调试JS. 1.认识console对象 console对象是Firebug内置的对象,该对象可以在代码中写入,可 ...

  6. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  7. Google Chrome调试js代码,开发者工具之调试工具常用功能

    参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...

  8. 【JS学习】-利用谷歌浏览器调试JS代码（转）

    谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作. 首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发 ...

  9. Win8/Win7系统下用IE11浏览器调试js脚本

    作为一个web开发者,调试js脚本是工作中的一部分,但是并不是所有的浏览器都会很好的兼容js脚本的.随着win8系统的发布,ie11也慢慢进入了大家的视野,ie11的众多优点及新特性就不必多说了(全面 ...

随机推荐

  1. linux apache下虚拟主机配置方法

    假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修改/etc/httpd/conf/httpd.conf,在文件的最后加入 ...

  2. C# - 获取类中属性的名称

    用反射控制的,不过获取属性名称的方法,用方法形式获取的,不知道消耗大不大 using System; using System.Collections.Generic; using System.Li ...

  3. jquery.flot.js简介

    JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...

  4. Elasticsearch学习之SearchRequestBuilder的query类型

    1. 分词的时机 对于ES来讲,可以对文档的内容进行分词(前提是设置了analyzed),也可以对输入的搜索词进行分词.对输入的搜索词进行分词时需要看下使用的什么类型的query.不同的query可能 ...

  5. 题目1456：胜利大逃亡(广度优先搜索BFS)

    题目链接:http://ac.jobdu.com/problem.php?pid=1456 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  6. 升级后重启造成fsck.ext3: Unable to resolve UUID

    这篇文章帮了我的大忙了:转载自:http://wilber82.blog.51cto.com/1124820/724472 今天在做服务器补丁部署,有一台ESX4.1的服务器在升级后重启过程中挂了,通 ...

  7. 安装sqlite3.8的方法

    wget http://www.sqlite.org/2015/sqlite-autoconf-3081101.tar.gz tar -xvzf sqlite-autoconf-3081101.tar ...

  8. 解决使用Foxmail客户端软件不能收取腾讯企业邮箱的全部邮件

    一般说来,使用Foxmail客户端软件收取邮箱时,需要作如下几步: 1.进入邮箱web界面授权开启POP3/SMTP服务.IMAP/SMTP等服务 2.在邮箱web界面配置收取选项,可选择收取全部邮件 ...

  9. Android 使用MediaPlayer 播放 视频

    http://pan.baidu.com/s/1lgKLS package cn.bgxt.surfaceviewdemo; import java.io.File; import android.m ...

  10. 判断强联通图中每条边是否只在一个环上（hdu3594）

    hdu3594 Cactus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...