jQuery选择列表表单提交示例

jQuery 的商品选择表单提交，用起来还挺顺手的。选择器用得灵活，表单提交靠 Ajax 异步，用户体验也不错。整个流程就是选中商品、点提交，数据就能轻松发给后台。

jQuery 的选择器真的是个利器。不管是通过$('#id')找 ID，还是$('.class')抓类名，都挺方便的。你甚至还能按属性、值来选，页面上想操作哪个元素基本都能一把抓。

商品选择一般是个下拉框，每个商品是。想知道用户选了哪个？一句$('#商品选择').val()就能搞定，代码简单明了。

表单提交那块稍微讲讲思路。你用

搭好结构，用 jQuery 监听它的submit事件。为了不让页面跳转，记得加event.preventDefault()。

提交数据推荐用.serialize()，把整个表单转成 URL 参数字符串，直接塞进$.ajax()发出去。像下面这样：

$('#myForm').on('submit', function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
  $.ajax({
    url: 'submit 商品信息',
    type: 'POST',
    data: formData,
    success: function(response) {
      console.log('表单提交成功：' + response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error('表单提交失败：' + textStatus + ' - ' + errorThrown);
    }
  });
});

想完整体验一下，文件texiao4460_1560681033里应该有打包好的 HTML、CSS 和 jQuery 脚本，下载下来看看更直观。

如果你正打算搞个类似的商品选择提交表单，这套代码思路可以直接拿来用，省事不少。

下载地址

用户评论

更多下载

下载地址

立即下载

用户评论