主页 / 问题 / 1415291
Accepted
Михаил Горячев
Asked:2022-07-30 23:17:59 +0000 UTC2022-07-30 23:17:59 +0000 UTC

使用一个 ajax 脚本发送 2 个表单

  • 772

请告诉我如何正确编写 Ajax 脚本，以便在提交第二个表单时页面不会重新加载。有必要恰好保留 2 个表格。

代码中发生了什么：add_review通过 ajax 提交第一个表单时，我成功提交了第二个表单$('.rating').submit();，但在这种情况下页面会重新加载。是否可以添加脚本以便发送第二个表单但不重新加载页面。

设计：

<form class="rating" method="POST" action="updates/add_review_stars.php" enctype="multipart/form-data">
    <input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
    <label>
    <input type="radio" name="stars" value="1" />
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="2" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="3" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>   
    </label>
    <label>
    <input type="radio" name="stars" value="4" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="5" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    </form>

    <form id ="add_review" enctype="multipart/form-data">
    <input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
    <input type="hidden" class="uk-input" value="0" name="approved" id="approved">
    </br>
    <label class="uk-form-label" for="form-stacked-text">Имя</label>
    <input type="text" class="uk-input" name="name" id="name" required>
    <label class="uk-form-label" for="form-stacked-text">Отзыв</label>
    <textarea class="uk-textarea" name="review" id="review" required></textarea>
    <div class="uk-margin">
    <input type="submit" name="submit" value="Добавить отзыв" data-dismiss="modal" class="uk-button uk-button-default">
    </div>
    </form>

    <script>
    $("#add_review").submit(function(send){
    send.preventDefault();
    $.ajax({
        url: 'updates/add_review.php',
        type: 'POST',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(html){  
            $("#addresult_review").html(html);
            $('.rating').submit();
        }  
    });
    });
    </script>
php ajax

1 个回答

  1. Best Answer

    你可以这样写，例如，我在最后添加了清除表单，最好让按钮处于非活动状态，这样如果第一个请求没有时间解决，它们就不会意外发送两次，然后这在理论上是可以发生的。

    作为一种选择，您还可以使用 Ajax 创建一个函数，您可以为这两种形式（使用不同的参数）调用该函数，并在函数的开头禁用发送按钮，直到响应到来或发生发送错误。

    $("#add_review").submit(function(send){
    send.preventDefault();
    $.ajax({
        url: 'http://httpstat.us/200',
        type: 'POST',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(html){  
            //$("#addresult_review").html(html);
            sendRating()
        }  
    });
    });

    function sendRating(){
      var postData = $('.rating').serialize(); // данные
      $.ajax({
          url: 'http://httpstat.us/200',
          type: 'POST',
          data: postData,  
          contentType: false,
          cache: false,
          processData:false,
          success: function(html){  
             console.log('Отправлено')
             // чистим формы
             $("#add_review").trigger("reset");
             $('.rating').trigger("reset");
          }  
      });
    }
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<form class="rating" method="POST" enctype="multipart/form-data">
<input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>   
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</form>

<form id ="add_review" enctype="multipart/form-data">
<input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
<input type="hidden" class="uk-input" value="0" name="approved" id="approved">
</br>
<label class="uk-form-label" for="form-stacked-text">Имя</label>
<input type="text" class="uk-input" name="name" id="name" required>
<label class="uk-form-label" for="form-stacked-text">Отзыв</label>
<textarea class="uk-textarea" name="review" id="review" required></textarea>
<div class="uk-margin">
<input type="submit" name="submit" value="Добавить отзыв" data-dismiss="modal" class="uk-button uk-button-default">
</div>
</form>

    • 0

相关问题