Question

我有一个带有3个按钮的表单，我希望这个帖子由AJAX处理。每个按钮都应该在我的ajax请求URL的末尾触发不同的查询字符串。

例如，当用户点击

时

doRegPwd ?config=reg_password_save
doRegGen ?config=reg_password_generate
doRegDisable ?config=reg_disable

如何使用jquery执行此操作？

$('[name="reg_password"]').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: 'framework/AJAX/config_actions.php?config=reg_password_generator',
        data: $(this).serialize(),
        success: function(data){
            alert(data);                    
        }
    });
});
$('#doRegPwdGen, #doRegPwd, #doRegDisable').click(function(e){
    $(this).closest('form').submit();
});

HTML：

   <form name="reg_password" method="post" action="">
      <label>Password for <a href="external_forms/register.php<?php if(!empty($row_config['reg_password'])) { echo '?reg_pwd=' . $row_config['reg_password']; } ?>" target="_blank">registration form</a></label>
      <input name="reg_password" type="text" id="reg_password" class="input" value="<?php echo $row_config['reg_password']; ?>">
      <br>
      <input name="doRegPwd" type="button" id="doRegPwd" value="Save" class="btn btn-success">
      <input name="doRegPwdGen" type="button" id="doRegPwdGen" value="Generate" class="btn btn-space btn-info"></button>
      <input name="doRegDisable" type="button" id="doRegDisable" value="Disable" class="btn btn-space btn-warning">
    </form>

Answer 1

有几点：

如果你有ids或类，你可以使用它们而不是名字选择。应该更快
为什么使用input type="button"而不是<button>元素。
提交活动适用于表格。使用按钮只需绑定到click事件。

我实际上会执行单击事件并将URL设置为数据元素。在你的例子中，两个触发器表单asubmit但是你说你希望每个人都有自己的URL，所以我会这样做。表单元素不需要名称。我已经更改为id并将click事件设置为委托事件，因此我只需要有一个事件。就像是。

HTML：

<form id="reg_password" method="post" action="">
<!-- other inputs here -->
      <br>
      <button name="doRegPwd" data-mynamespace-url="reg_password_save" type="button" id="doRegPwd" class="btn btn-success">Save</button>
      <button name="doRegPwdGen" data-mynamespace-url="reg_password_generate" type="button" id="doRegPwdGen" class="btn btn-space btn-info">Generate</button>
      <button name="doRegDisable" data-mynamespace-url="reg_disable" type="button" id="doRegDisable" class="btn btn-space btn-warning">Disable</button>
    </form>

使用Javascript：

$(function(){
   $('#reg_password').on('click', '.btn', function(){
       var form = $(this).closest('form');
       $.ajax({
        type: "POST",
        url: 'framework/AJAX/config_actions.php?config=' + $(this).data('mynamespace-url'),
        data: form.serialize(),
        success: function(data){
            alert(data);                    
       }
    });
   });
});

Answer 2

的jQuery

$('[name^="doReg"]')匹配您的输入，因为每个名称属性都以“doReg”
e.preventDefault()已替换为onsubmit="return false"（在HTML中）

$('[name^="doReg"]').click(function(e) {

    var query = $(this).data("query");
    $(this).closest('form').submit();

    $.ajax({
        type: "POST",
        url: 'framework/AJAX/config_actions.php?' + query,
        data: $(this).serialize(),
        success: function(data){
            alert(data);                    
        }
   });

});

HTML

我们现在使用数据属性（HTML5功能）存储数据。
当我们使用HTML5时，为什么不使用语义<button>呢

 <form name="reg_password" onsubmit="return false" method="post" action="">   
    <button name="doRegPwd" data-query="config=reg_password_save"></button>
    <button name="doRegPwdGen" data-query="config=reg_password_generate"></button>
    <button name="doRegDisable" data-query="config=reg_disable"></button>
</form>

jquery ajax url取决于按下按钮

2 个答案:

的jQuery

HTML