使用浏览器，调试js代码

转载

mob604756ff6c49 2018-03-30 09:36:00

文章标签 html jquery javascript 提交表单 ide 文章分类 JavaScript 前端开发

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>

$(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代码的按钮，进行调试。

使用浏览器，调试js代码_html

6：调试页面

使用浏览器，调试js代码_jquery_02

二：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()方法即可获取参数