Javascript 在PHP和Sweet Alert confirm中使用OOP时，ajax表单提交出现错误

我想用ajaxjquery提交一个表单，我想在提交表单并确认之前发出sweet警报

当我不使用任何AJAX或JavaScript时，表单工作正常，但我希望在不重新加载页面的情况下提交表单，并且我希望在使用Sweet alert方法（即

swal（）

）单击submit和cancel按钮之前显示警报

这是我的HTML：

<form role="form" id="myform"  class="countrysaveform" action="include/db_connect/actions.php" method= "POST" >
<div class="form-body">
<div class="form-group">
<label>Cournty Name</label>
<input type="text" name = "country" id="country" class="form-control"  placeholder="">
</div>
<div class="form-group">
<input type="hidden" name= "userip" id= "userip" class="form-control" value="<?php $ip=$_SERVER['REMOTE_ADDR']; echo $ip; ?>" placeholder="">
</div>
<div class="form-group">
<label>Status</label>
<select name ="status" id= "status" class="form-control">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
</div>
<div class="form-actions">
<button type="submit" name="save" id="save"  class="btn blue">SAVE</button>
<button type="button"  class="btn default">Cancel</button>
</div>
</form>

这是MySQL数据库结构：

TABLE `ux_country` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(25) NOT NULL,
  `country_status` varchar(12) NOT NULL,
  `added_date` date NOT NULL,
  `added_on_time` time NOT NULL,
  `added_by_ip` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

这是甜蜜的警报代码：

$(document).ready(function(){
  $('#myform').on('submit',function(e) {  //Don't foget to change the id form
  $.ajax({
      url:'include/db_connect/actions.php', //===PHP file name====
      data:$(this).serialize(),
      type:'POST',
      success:function(data){
        console.log(data);
        //Success Message == 'Title', 'Message body', Last one leave as it is
        swal("¡Success!", "Message sent!", "success");
      },
      error:function(data){
        //Error Message == 'Title', 'Message body', Last one leave as it is
        swal("Oops...", "Something went wrong :(", "error");
      }
    });
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
  });
});

在HTML中更改

type="submit"

到

在Javascript中： 改变

$('#save').on('submit'....

致：

要在单击“取消”按钮时获取警报，请将id添加到“取消”按钮：

<button type="button"  class="btn default" id="cancelBtn">Cancel</button>
$('#cancelBtn').on('click', function(){
   alert('sweet message');
   $("#myform").trigger('reset');

});

取消
$（'#cancelBtn'）。在（'click'，function（）上{
警报（“甜蜜信息”）；
$（“#myform”）.trigger（'reset'）；
});

我想提交表单而不需要重新加载页面，我想在提交前发出警报，并使用Sweet alert方法取消按钮

实现这一点的一种方法是对任何按钮单击使用事件委托。为此，请将单击处理程序更改为：

$('#myform').on('submit',function(e) {  //Don't foget to change the id form

致：

然后，只要单击按钮，就可以执行对的调用。这可以通过检查事件目标的属性来实现

if (e.target.tagName.toUpperCase() == 'BUTTON') {
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
}

这也可以使用jQuery的方法和：

然后将id属性添加到标记为“取消”的按钮中

<button type="button" class="btn default" id="cancel">Cancel</button>

然后，在序列化调用$.ajax（）的数据选项的表单时，使用id属性选择表单：

$.ajax({
  url:'include/db_connect/actions.php', //===PHP file name====
  data:$('#myform').serialize(),

因此，不会将

包含在数据中，因为这些不是真正的表单元素。因此，在PHP代码（即action.PHP）中，检查其中一个输入（例如country）的名称，以确定是否应保存数据：

if(isset($_POST["country"])){

在php代码的末尾，调用重定向到其他位置是没有意义的，因为这段代码是异步调用的（即通过AJAX），并且重定向（即响应代码3xx）没有遵循。通常在异步调用中返回字符串或JSON数据

总而言之，我们有下面的代码。请参见中的演示

$（文档）.ready（函数（）{
$（文档）。在（'单击'）上，函数（e）{
var目标=$（e.target）；
if（target.is（'BUTTON'））{
e、 preventDefault（）；//这是为了避免页面刷新并触发事件“单击”
}
if（target.attr（'id'）=='save'）{
swal（'单击保存'）；
//触发AJAX请求
}else if（target.attr（'id'）=='cancel'）{
swal（“单击取消按钮”）；
}
});
});

如果我明白了，你只是想在提交表格前提醒我？为什么不能在ajax调用之前移动
swal（）
方法（即，将其从回调方法中拉出）？我遗漏了什么？@SarfarazDalawi我看到你在下面评论：“当我点击SAVE按钮时，它显示了成功消息，但没有存储在db中，我想它没有调用actions.php文件。”。请参阅我的更新答案，我在最后提到了PHP代码（即action.PHP）。感谢您的建议，但我的代码现在是这样的，但当我单击“保存”按钮时，它会显示成功消息，但不会存储在db中，我想它不会调用该actions.PHP文件。。请帮忙
$('#myform').on('submit',function(e) {  //Don't foget to change the id form

$(document).on('click', function(e) {

if (e.target.tagName.toUpperCase() == 'BUTTON') {
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
}

var target = $(e.target);
if (target.is('BUTTON')) {
    e.stopPropogation();
}

<button type="button" class="btn default" id="cancel">Cancel</button>

if (target.attr('id') == 'save') {
    swal('save clicked');
    //trigger AJAX request
}
else if (target.attr('id') == 'cancel') {
    swal("cancel button clicked");
}

$.ajax({
  url:'include/db_connect/actions.php', //===PHP file name====
  data:$('#myform').serialize(),

if(isset($_POST["country"])){