ajax提交表单后,清空表单

本文介绍了一个简单的网页应用,该应用允许用户输入商品名称、价格和种类,并通过Ajax技术将这些信息发送到服务器进行处理。成功提交后,页面会显示所有已录入的商品信息列表,包括商品名称、价格、种类及操作按钮。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div align="center" id="div2">
    <form>
    商品名称:<input type="text" id="gname"><br><br>
    商品价格:<input type="text" id="gprice"><br><br>
    商品种类:<input type="text" id="category"><br><br>
    <input type="button" value="添加" id="but2">
    <input type="reset" style="display:none;" /> 
    </form>

    </div>

<script type="text/javascript">
 
  $("#but2").click(function(){
  var gname = $("#gname").val();
  var gprice = $("#gprice").val();
  var catagory = $("#category").val();
  $.ajax({
  url:"goodsAction_addGoods.action",
  type:"post",
  data:{"goods.GName":gname,"goods.GPrice":gprice,"goods.GSpecies":catagory},
  success:function(result){
  alert(result);
  $("table").html("");
  var htmls = "<tr><td>商品编号</td><td>商品名称</td><td>商品价格</td><td>商品种类</td><td>操作</td></tr>";
  $.each(result,function(i,n){
  htmls += "<tr><td>"+n.GId+"</td><td>"+n.GName+"</td><td>"+n.GPrice+"</td><td>"+n.GSpecies+"</td><td><a href='shoppingAction_addOrder.action?GId="+n.GId+"'>添加到购物车</a></td></tr>";
  });
  $("table").html(htmls);
  $("#div2").hide();
  $("input[type=reset]").trigger("click");//触发reset
  }
 
  });
  });
 
  </script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值