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(), ／*开发
4000
给的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格式