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. 中间件系列三 RabbitMQ之交换机的四种类型和属性

    概述本文介绍RabbitMQ中交换机类型和属性,主要内容如下: 交换机的作用交换机的类型:Direct exchange(直连交换机).Fanout exchange(扇型交换机).Topic exc ...

  2. 响应式web设计之@media

    两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件: 1 <link rel="stylesheet" type="text/css" ...

  3. Esper学习之九：EPL语法（五）

    本篇的内容主要包括了Subquery(也就是子查询)和Join,内容不少,但是不难,基本上和sql差不太多. 1.Subquery EPL里的Subquery和sql的类似,是否比sql的用法更多我不 ...

  4. java（8） HashMap源码

    系统环境: JDK1.7 HashMap的基本结构:数组 + 链表.主数组不存储实际的数据,存储的是链表首地址. 成员变量 //默认数组的初始化大小为16 static final int DEFAU ...

  5. C# mongohelper的初始化及账户密码设置

    MongoClientSettings mongoSettings = new MongoClientSettings(); TimeSpan t = ); mongoSettings.Connect ...

  6. nginx expires配置

    配置expiresexpires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求要配置expires,可以在http段中或者server段中或者location段中加入   1 ...

  7. 2018 青岛ICPC区域赛E ZOJ 4062 Plants vs. Zombie(二分答案)

    Plants vs. Zombies Time Limit: 2 Seconds      Memory Limit: 65536 KB BaoBao and DreamGrid are playin ...

  8. 不同.NET Framework版本下ASP.NET FormsAuthentication的兼容性

    假设站点A加密使用.NET Framework 2.0,站点B解密使用.NET Framework 4.0,除了保持MachineKey相同外还需要进行如下设置: 1.Web.config的<a ...

  9. unity3d的优化场景技术LOD+IOC

    一.unity3d的优化场景技术  LOD+IOC 遮挡剔除(occlusion culling)其实就是在摄像机范围内的物体才被渲染出来,没有在视野范围内的,统统关掉渲染,这样能让性能大大提高. I ...

  10. java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException

    启动spring boot项目的时候遇到了报错: -Sep- ::15.513 INFO [main] org.apache.catalina.core.StandardService.startIn ...