js相关知识汇总(php)

1.如何从将前端的表单进行提交

原理：通过前端表单form进行提交，一个submit对应一个提交，里面的id要保持唯一性，在表单前面配置好参数的传递，html中的配置如下

 <form class="app-submit-form form-horizontal" role="form" id="id" data-app-submit="{callback:TEST.tools.change}" action="/tools/changes" method="POST">

对上面代码解释：

callback：回调函数，提交触发submit按钮时，调用callback中的方法，将界面传过去的参数进行处理

TEST.tools = {
    addsn: function (data, elem) {
}

action：与jquery之间进行参数的传递，调的是tools文件下的changesaction.java文件，（文件名中的action不写入到action中）

2.在界面上显示当前时间，并显示在界面的thumbnail中

    addsn: function (data, elem) {
        var sndata = data.data;
        var myDate = new Date();
        var myYear = myDate.getFullYear();
        var myMonth = myDate.getMonth();
        var myDay = myDate.getDate();
        var mytime = myDate.toLocaleTimeString();
        var myCurrentTime = '';
        var html = '';
        myCurrentTime += myYear + '-' + myMonth + '-' + myDay + ' ' + mytime;
        $('.thumbnail').append('-------------------------' + myCurrentTime + '------------------------' + '<br>' + html + '<br>');
        }

输出效果如下

3.在前端的面板框thumbnail中加入内容

1）在前端的html中该面板的class为

<div class="thumbnail">

2）在js中往 thumbnail内追加内容用append

$('.thumbnail').append('-------------------------' + myCurrentTime + '------------------------' + '<br>' + html + '<br>');

3）当thumbnail中的内容不满时，依次按行进行添加，当里面内容将此面板填满时，出现滚动条，并且靠下端显示

$('.thumbnail').scrollTop( $('.thumbnail')[0].scrollHeight );

4.根据network返回值在界面上进行输出

点击“提交”按钮时，触发submit操作，调用form表单绑定的action，触发相应的action，获取界面元素录入的elem，传给api，获取界面

注：在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式。同response，界面响应

上面为界面响应，需要把界面响应转化为相应格式输出在前端界面的thumbnail中，将data看成一个数组，依次将其中的元素打印出来

代码解释：依次将data中的sn，imei打印出来，直至为空

XMTEST.tools = {
    addsn: function (data, elem) {
        var sndata = data.data;
        var myDate = new Date();
        var myYear = myDate.getFullYear();
        var myMonth = myDate.getMonth();
        var myDay = myDate.getDate();
        var mytime = myDate.toLocaleTimeString();
        var myCurrentTime = '';
        var html = '';
        myCurrentTime += myYear + '-' + myMonth + '-' + myDay + ' ' + mytime;

        if (data.errno === 0) {
            for (var i = 0; i < sndata.length; i++) {
                html += '<span class="text-primary">SN:</span> ' +
                    sndata[i].sn + '<span class="text-primary">   </span>' + '<span class="text-primary">IMEI</span>: ' +
                    sndata[i].imei + '  ' + '<br>';
            }
            if(sndata[0].sn) {
                $('.thumbnail').append('-------------------------' + myCurrentTime + '------------------------' + '<br>' + html + '<br>');
            }else{
                $('.thumbnail').append('-------------------------' + myCurrentTime + '------------------------' + '<br>' +'对sku为:'+
                    $("#sn_sku_select").val() + '的商品添加sn失败' + '<br>' + '当前商品(' +  $("#sn_sku_select").val() + ')不需要sn' + '<br>');
            }
        }

显示效果如下：

5.在js中获取html中被选择项的值

界面显示

在js中通过以下方式能够获取前端传来的被选中的值，然后进行相应操作

 var type = $('input:radio[name="type"]:checked').val();
        if(type === '1'){
            type = '良品' ;
        }else{
            type = '残品';
        }

6.$(document).ready(function()：

使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

7.jQuery中的一些事件：详情看注释

reventDefault()函数用于阻止当前触发事件的默认行为，在HTML文档中，当我们触发某些DOM元素的特定事件时，可以执行该元素的默认行为。比如链接的click事件：当我们点击一个链接时，就会跳转到指定的URL。再比如：<form>表单元素的submit事件，当我们触发表单的提交事件时，就可以提交当前表单，该函数属于jQuery的Event对象。例如；
event.preventDefault() 方法阻止元素发生默认的行为。
例如：
1）当点击提交按钮时阻止对表单的提交
2）阻止以下 URL 的链接

$(document).ready(function() {.   /*这样用户在第一眼看见页面元素时，function里的特效就可以运行了*/
    $("#aa").blur(function () {   ／*.blur()：jQuery事件，当元素失去焦点时发生 blur 事件：一跳出#aa处的文本框，鼠标点击界面其他地方，就触发此事件*／
        $.ajax({
            type: "GET",
            url: "/product/info?aa=" + $("#aa").val(), ／*开发给的api数据，会根据aa值获取相应的sku信息*／
            success: function (msg) {
                if ($("#aa").val().length > 0) {
                    if (msg.errmsg === 'ok') {
                        var sndata = msg.data;
                        if (sndata.sku) {
                            $("#aa").html("<option value='" + sndata.sku + "'>" + sndata.sku + "-" + sndata.goods_name + "</option>");
                            addSkuOption("aa_select");    ／*在下拉框列表依次添加列表*／
                        }
                    }
                    else {
                        all_notify("您输入的aa不存在");
                        $("#aa").val("");
                    }
                }
            }
        });
    });

    $("#aa").keypress( function(e){    ／*当按钮被按下时发生该事件：对于#aa文本框，一点击回车键就触发*／
        if(e.keyCode=="13"){            ／*触发enter键的时候，enter键的ascll码是13*／
            e.preventDefault();         ／*.preventDefault()：阻止元素发生默认的行为。触发回车键的时候，会触发enter对应的submit，为避免冲突，将操作设为默认行为。不触发其他操作*／
            $("#aa").blur();
        }
    }); 
});
//添加aa列表，在列表后面追加原列表
function addSkuOption(id) {
    $('#'+id).append("<option value='100'>"+"100"+"</option>");
    $('#'+id).append("<option value='101'>"+"101"+"</option>");
    $('#'+id).append("<option value='102'>"+"102"+"</option>");
}

8.前端的通知、警示等用jquery中的notify格式