jQuery ajax和php iframe。 形成目标问题

overflowers here is the daily question. =)

Use case & problem description:

  1. I'm submitting a form via jQuery $.ajax({...})
    • The ajax post call trigger an SQL insert done by php.
    • The SQL query is executed successfully and can be checked on the DB.
  2. The iframe which is used to display the result didn't get update.
    • original button attached to form used target="id_of_iframe"*
  3. The post destination is in the same url, same target (my_iframe)

So,

  • How do I update the iframe with the result data of the $.ajax post?

  • Should I add some other controls?

  • Some other form submission method with editable post data compliant with iframe?

Thanks to all in advance, have a nice coding-day :)

The code:

HTML

<html>
  <head>
    ...
  </head>
  <body>
    <!--the iframe -->
    <iframe src ="iframe.php" 
      class="my_iframe" id="my_iframe" 
      name="my_iframe" frameborder="0" allowtransparency="true">
    </iframe>
    <!--the form -->
    <form id="my_form" action="iframe.php" 
     method="post" target="my_iframe">
       <!-- some input fields -->
       <button onclick="my_function"></button>
    </form>
  </body>
</html>

JAVASCRIPT - JQUERY

function my_function(){
   var my_data = .../*go collect form data*/
   $.ajax({
     type: "POST",
     url: "iframe.php",
     data: my_data,
     success:function(response){
         $("#my_frame").html(response);
     }
   });
}

Partial Result:

  1. The chrome console log this warning about jquery.min.js:4

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

  1. Some CSS get buggy and some font/font-weight change

PS In the ajax.success function I've tried this alternative but the issue is the same:

$('#my_iframe').append(result);

To update the iframe you can just update it's src attribute like so:

$('iframe#my_iframe').attr('src', 'iframe.php');

put this in your ajax success callback. and the iframe will reload.