代码不能很好地执行PHP文件单击一个按钮 - code not working good to execute php file on click a button

code not working good to execute php file on click a button

我有一个带有按钮的页面，当我单击此按钮时，jquery-ajax在另一个文件中执行php代码，但代码不像我想的那样工作。

按钮代码非常简单:

<button type="submit" onclick="runCode()"> Execute </button>

问题是在jquery-ajax代码，因为如果我使用这个代码:

$(document).ready(
   function runCode(){
      $.ajax({
         url: "file.php",
         success: function(msg){
            alert( "Done.");
         }
      });
   }
)

当我加载页面时，file.php的代码被执行，但没有点击按钮，事实上按钮，加载页面后，不工作。

相反，如果我使用以下代码:

function runCode(){
   $.ajax({  
      url: "file.php",
      success: function(msg){
         alert( "Done.");
      }
   });
}

按钮工作，当我点击它时，我看到警告"完成"，但file.php没有执行。

为什么在第一种情况下，文件被执行，但按钮不工作，而在第二种情况下，按钮工作，但php文件不执行?如何纠正代码?

第一种情况将函数包装在DOM就绪包装器$(document).ready()中。这意味着它不能从全局作用域访问，所以当你的按钮试图触发runCode()时，它是未定义的。

在第一种情况下，函数在DOM加载时被触发，即使你没有像runCode()那样显式地调用它，你所做的是将函数传递给DOM就绪处理程序，它将调用它。

第二种情况没有DOM准备好的包装器，因此在全局作用域中，因此可以通过inline click按钮访问。

当你说文件没有被执行，但是它触发了警报——这是不可能的，因为成功函数只有在请求被成功发送并且收到成功的响应时才会运行。

另外，使用按钮类型submit可能会使事情变得混乱。默认情况下，这将在运行click处理程序后提交表单。如果您不希望这样，那么要么更改为button类型，要么使用点击处理程序return false(或防止默认)。

两件事:

您可能需要将按钮类型从submit更改为button:
```
<button type="button" id="run-button">Execute</button>
```
与type="submit"，你提交任何形式，你在你的页面上，它是刷新，所以你永远不会看到警告。

在DOM-ready处理程序中连接事件;你并不真的需要runCode函数，除非你有其他原因。

$(function() {
    $('#run-button').click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "file.php",
            success: function(msg) {
                alert( "Done.");
            }
        });
    });
});

试试这个

<button type="button" id="submitButton"> Execute </button> 
<!-- no onclick. This is handled by jQuery -->
<!-- type: button instead of submit -->

// the same as .ready()
jQuery(function($)( 
   // var: cannot be accessed from outside, makes JS unobtrusive
   var runCode = function(e) { 
      $.ajax({
         url: "file.php"
      })
      // uses 'new' Deferred jQuery
      .done(function(msg){ 
         alert( "Done.");
      });
      // Stops Standard submit behaviour
      e.preventDefault(); 
   }
   $('body').on('click', '#submitButton', runCode);
)