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. Git 创建两个“本地分支”协同工作

    一 代码拉下来后,首先创建两个本地分之 $repo start master . //仅仅用于同步服务器的修改(此处master名字可以随意定,但是建议定成这样,好记忆) $repo start wo ...

  2. jquery的ajax()函数中文传值出现乱码完美解决方案

    1.        jquery的ajax()函数 $.ajax({ type: "POST", dataType: "text", url: ".. ...

  3. 【CF772D】Varying Kibibits FWT

    [CF772D]Varying Kibibits 题意:定义函数f(a,b,c...)表示将a,b,c..的10进制下的每一位拆开,分别取最小值组成的数.如f(123,321)=121,f(530,  ...

  4. Edge Animate使用SPRITESHEET创建动画（三）

    在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法.在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画.本文将从一个示例出发,介绍 ...

  5. 【转载】51单片机data，bdata，idata，xdata使用注意事项

    "51单片机编程在不同内存空间data xdata bdata定义变量的注意事项": 关键词:51 单片机 编程 不同 内存空间 data xdatabdata 定义 变量 注意事 ...

  6. LCA最近公共祖先（least common ancestors）

    #include"stdio.h" #include"string.h" #include"iostream" #include" ...

  7. Context对象还提供了相应的属性来调整线条及填充风格

    创建一个Canvas画布的方法如下: 复制代码 代码如下: <canvas id=”canvas” width=”600” height=”400”></canvas> 可以在 ...

  8. 在ubuntu下安装使用latex

    参考:https://www.cnblogs.com/longdouhzt/archive/2012/09/27/2706358.html https://jingyan.baidu.com/albu ...

  9. 【转】.NET Framework、C#语言、IDE、CLR 版本历史及其差异

    原文地址: http://www.cnblogs.com/PurpleCow/archive/2012/06/17/2552780.html http://www.cnblogs.com/lhking ...

  10. HIT 2715 - Matrix3 - [最小费用最大流][数组模拟邻接表MCMF模板]

    题目链接:http://acm.hit.edu.cn/hoj/problem/view?id=2715 Time limit : 5 sec Memory limit : 64 M Zhouguyue ...