浅谈Web页面向后台提交数据的方式和选择,jQuery实现移动端手机商城购物车功能

1、通过表单提交

购物车数量加减

$parse和$eval

那是HTML帮忙最古板的付出方法,须求创建表单,然后表单包罗各种类型的表单成分,还要有一个付给开关,通过付出按键来交付到后台,这种办法提交后页面会刷新。

右加号

$parse和$eval那四个函数都足以深入分析表达式的值.

2、通过网页链接提交

$(".jiahao").click(function() {
var t = $(this).siblings().find("input");//取到数量
t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串,返回一个整数
heji();//调用后面计算的函数
})

它们的不一样在于$parse是贰个劳务, 可以注入使用.
$eval是scope对象上的壹个措施, 我们只幸亏能访谈scope的场合下使用它.

可以在网页的链接附上供给付出的参数,当用户点击链接后,浏览器发起向链接的走访,进而也把链接附带的参数提交到后台,这种方法交给后页面也会刷新。

左减号

var getter = $parse('user.name');
var setter = getter.assign;
var context = {user: {name: 'John Doe'};
var locals = {user: {name: 'Doe John'};

getter(context); //John Doe
setter(context, 'new name');
getter(context); //new name
getter(context, locals); //Doe John

3、通过ajax提交

$(".jianhao").click(function() {
var t = $(this).siblings().find("input");
t.val(parseInt(t.val()) - 1);
//当数量小于1的时候让最小值等于1
if(parseInt(t.val()) < 1) {
t.val(1)
};
heji();
})

$parse服务接受二个表明式作为参数并重临三个函数. 那几个函数能够被调用,
在那之中的参数是叁个context对象, 日常来讲是职能域.
其余, 这些函数有三个assign属性. 它也是一个函数,
能够用来在给定的左右文中退换那几个表明式的值.
最终一行代码演示了怎么着行使locals来覆盖context对象.

Javascript帮忙ajax情势创建HTTP须求,可以透过在HTML页面成分的事件管理函数中开创ajax央浼,在url参数里指导所需提交的参数,进而提交到后台,这种办法提交后页面不会刷新。

算算商品总价

$eval用起来要轻松比较多, 因为它的上下文已经被钦点为scope对象.

在其实Web页面中,我们要根据实际用户交互的急需来摘取特别的交给格局。

function heji() {
$(".gwcar").each(function() {//循环整个购物车
var oprice = ; //商品总价
$(this).find(".glist").each(function() {//循环购物车里的每个商品,this值得是这个购物车
if($(this).find(".btn").hasClass("option") == true) {//判断商品被选中的情况下,this指的是购物车的三个商品
var num = $(this).find(".shuliang").val();//取到数量,this指的还是购物车的商品一个
var danjia = $(this).find(".danjia").text();
var xiaoji = num * danjia; //商品小计
oprice += xiaoji;
$(".zongjia").html(oprice);
};
});
});
};
var scope = $rootscope.$new(true);
scope.a = 1;
scope.b = 2;
scope.$eval('a + b')//3
scope.$eval(function(scope){
 return scope.a + scope.b;
});//3

1、假诺须要使用部分的表单类型用户输入,比如文本框、单选框、下拉框,那么能够采用第1种和第3种艺术,借使愿意交给后页面刷新就选第1种,如若不希望交给后页面刷新就选第3种。

末尾附图一张

有关$parse和$eval之间的关系, 大家能从Angular源码中看出来,
能够说$eval是为着让$parse在scope中使用更方便的语法糖.

2、假若无需表单类型输入,那么能够选拔第2种和第3种艺术,假使希望交给后页面刷新就选第2种,倘使不期望交给后页面刷新就选第3种。

图片 1

$eval: function(expr, locals){
 return $parse(expr)(this, locals);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注