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. Swift - 可选类型详解

    可选类型详解 直接上代码解释 // 类中所有的属性在对象初始化时,必须有初始化值 class Person : NSObject { var name : String? var view : UIV ...

  2. Swift - 3.0 去掉 C 风格循环

    Swift 3.0 版本去掉了沿用已久的 C 风格循环语法, 又是向现代开发语言的一次迈进, 咱们就来看看没了 C 风格循环我们还有什么选择 C 风格循环 关于 C 风格循环, 不我们过多介绍了, 就 ...

  3. android R文件不能识别？

    android R文件引入不了原因可能是: 1.xml有错误,导致R文件生成失败:(修改xml,并clear,然后再重新Bulid一下即可) 2.如果是图片,可能是命名有问题,查看并修改(不要以数字开 ...

  4. apache使某目录下的文件能够列表显示出来

    想要使web目录下,某目录下的文件列表显示而不是显示"You don't have permission to access / on this server" 需要在httpd. ...

  5. cxGrid使用汇总4

    1.     CxGrid汇总功能 ① OptionsView-Footer设置为True,显示页脚   ② CxGrid的Summary选项卡定义要汇总的列和字段名及汇总方式,Footer选项卡定义 ...

  6. dirname的用法：获取文件的父级目录路径

    命令:dirname 获取文件的路径(到父级目录)用法:dirname file_name [root@bogon opt]# a=$(dirname /mnt/a/b/c/d/a.sh) [root ...

  7. ASP.NET 文件上传于下载

    本文主要介绍一下,在APS.NET中文件的简单上传于下载,上传是将文件上传到服务器的指定目录下,下载是从存入数据库中的路径,从服务器上下载. 1.上传文件 (1)页面代码 <table alig ...

  8. 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variabl

    1.添加M2_HOME的环境变量 2.Preference->Java->Installed JREs->Edit 选择一个jdk, 添加  -Dmaven.multiModuleP ...

  9. Node.js 命令行程序开发资料

    Node.js 命令行程序开发教程http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html用Node.js创建命令行工具ht ...

  10. Pangolin中opengl的混合（gl_blend）

    Blend 混合是将源色和目标色以某种方式混合生成特效的技术.混合常用来绘制透明或半透明的物体.在混合中起关键作用的α值实际上是将源色和目标色按给定比率进行混合,以达到不同程度的透明.α值为0则完全透 ...