HTML表单停止重定向并允许PHP从HTML文件中调用JavaScript

问题描述：

I'd like to have a form on a HTML page not refresh when it's sent, which I've done, but I'd also like to allow the echo command in the PHP file to be able to call JavaScript from within the HTML file.

So far, all the echo commands aren't being carried out, which isn't what I expected.

Here's some code from the HTML and PHP files:

HTML:

<script type="text/javascript">

function functionInFile() {
    alert("recieved");
}

    $(function() {  
      $(".postform").submit(function() {  
      var content = $(this).serialize();

      $.post('signup.php?', content);

      return false;

      });  
    });     

</script>

and the PHP:

echo '<script type=\'text/javascript\'>functionInFile()</script>';

So basically, I'd like the PHP file to be able to invoke a function in the HTML file, while not being redirected when I click submit.

Any help appreciated.

我希望HTML页面上的表单在发送时不会刷新，我已经完成了，但是我也想允许PHP文件中的echo code>命令能够从HTML文件中调用JavaScript。 p>

到目前为止，所有的 echo code>命令没有被执行，这不是我的预期。 p>

以下是HTML和PHP文件中的一些代码： p> \ n


 HTML： p> 
 
 
 ＆lt; script type =“text / javascript”＆gt; 
 
function functionInFile（）{
 alert（“recieved”）  ; 
} 
 
 $（function（）{
 $（“。postform”）。submit（function（）{
 var content = $（this）.serialize（）; 
 
 $。  post（'signup.php？'，content）; 
 
返回false; 
 
}）; 
}）;  
 
＆lt; / script＆gt; 
  code>  pre> 
 
 和PHP： p> 
 
 
  echo'＆lt; script type =  \'text / javascript \'＆gt; functionInFile（）＆lt; / script＆gt;'; 
  code>  pre> 
 
 所以基本上，我希望PHP文件能够 调用HTML文件中的函数，而不是在我单击提交时重定向。 p> 
 
 
任何帮助表示感谢。 p> 
  div>

答

You can use the success callback of the $.post() to execute a function which your PHP passes back. Try this:

PHP

// do some stuff with the posted data
echo 'functionInFile'; // name of js function to execute in calling page

jQuery

function functionInFile() {
    alert("recieved");
}

$(function() {  
    $(".postform").submit(function() {  
        $.post(
            'signup.php?', 
            $(this).serialize(),
            function(func) {
                window[func]();
            },
            'text'
        );
        return false;
    });  
});

答

It could be better to use the callback function of post

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

So you would execute what ever code is within the reply or pre determined login onsusccess

$.post( 'signup.php?', content,
      function( data ) {
          //data contains the reply of the post so you can 
          //exec the code like this using JavaScript
          //altogether eval is frowned upon because it is high overhead and opens
          //opens up to code injection or whatever
         //eval(data);
         //so you just execute whatever method you need
         functionInFile();
        //or you reply from server in json and converto tobject
        //reply: {'executeFunction': true}
       var obj = jQuery.parseJSON(data);
       if (data.executeFunction == true) { functionInFile(); }

      }
    );

ParseJSON

In order for PHP echo to work. the page MUST reload baecause it is server side.

A webpage cycle is SERVER SIDE, then Client side.

[SERVER] -> [CLIENT -> AJAX to SERVER -> SERVER REPLY ATTACH]

答

It looks like you're sending the right <script> tag. XHR return values are treated as data though, not executable code. Luckily for you, jQuery has code to check if you insert a <script> tag into the dom and execute it. You should be able to just do:

$.post('signup.php?', content, function(html) {$(document).append(html);});

and your script will execute.

(I would recommend making this happen in a different way though. I've worked on Apps that send large portions of javascript back in AJAX calls, and it's a pain to debug. It would be much better to send back a JSON object with a string for the next action, then keep an object of "approved" actions as a string -> function lookup table.)

HTML表单停止重定向并允许PHP从HTML文件中调用JavaScript

相关推荐