如何在同一页面中调用ajax页面 - How to call the ajax page in same page?

我有两个文件demo.php和post.php.我怎么能在一个一页而不是两页。

demo.php

<html>
<head>
    <title>Dynamic Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
    <script>
        $(document).ready(function(){
            $("form").on('submit',function(event){
                event.preventDefault();
                data = $(this).serialize();
                $.ajax({
                    type: "POST",
                    url: "post.php",
                    data: data
                }).done(function( msg ) {
                    alert( "Data Saved: " + msg );
                });
            });
        });
    </script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
                    <option value="" selected="selected">Select...</option>
                    <option value="India">India</option>
                    <option value="Pakistan">Pakistan</option>
                    <option value="Us">Us</option>
                    <option value="other">Other</option>
                </select>
                <input type="textbox" name="other" id="other" style="visibility:hidden;"/>
                <input type="submit" name="submit" value="Add Country"  style="visibility:hidden;"/>
            </td>
        </tr>
    </table>
</form>
</body>

post.php

<?php
    if(isset($_POST['other'])) {
        $Country = $_POST['other'];
        echo $Country;
    }
?>

如何在不将数据从一个页面传递到另一个页面的情况下使用demo.php中的post.php数据。

更改ajax 的url

$.ajax({
      type: "POST",
      url: "demo.php",
      data: data
 }).done(function( msg ) {
      alert( "Data Saved: " + msg );
 });

并将其添加到您的demo.php 中

<?php
    if(isset($_POST['other'])) {
        $Country = $_POST['other'];
        echo $Country;
    }
?>

我有一些个人观察：

方法中的第一个：我不认为有两个单独的文件是个坏主意。这不是一个很好的优化。现在，您需要一个文件以两种不同的方式处理GET请求和POST（一种用于AJAX，另一种用于普通POST，以防您希望javascript正常降级
您可能需要删除"onchange"属性。了解UnobtrusiveJavaScript的概念，了解为什么这是一种良好的做法
从不信任用户输入：始终进行适当的消毒和验证
below是您的文件的重写版本。注意，我已经用更可维护的东西重新考虑了onChange，并且我正在使用JS来初始隐藏输入和提交按钮。这样，如果JS被禁用，用户仍然可以添加国家/地区

为了确定帖子是如何被触发的，我将额外的标志CCD_ 2传递给帖子。

<?php
    $country = filter_input(INPUT_POST, 'other');
    // Ajax
    if (isset($_POST['ajax']))
    {
        echo 'Successfully added country: ' . $country;
        exit();
    }
    // normal post
    else
    {
        echo $country;
    }
?>

动态窗体$（document）.ready（function）{$（'#country'）.on（'change'，hideStuff）；

    // hide the buttons to add extra option
    $('#other, #submit').hide();
    function hideStuff()
    {
        var select = $(this);
        var flag = select.val() === 'other';
        $('#other, #submit').toggle(flag);
    }
    $("form").on('submit',function(event){
        event.preventDefault();
        data = $(this).serialize() + "&ajax=" + 1;
        $.ajax({
            type: "POST",
            url: $(this).data('url'),
            data: data
        }).done(function( msg ) {
            alert( "Data Saved: " + msg );
        });
    });
});
</script>
</head>
<body>
    <form method="post" data-url="<?php echo basename(__FILE__); ?>">
        <table>
            <tr>
                <td>
                    <select id="country" name="one">
                        <option value="" selected="selected">Select...</option>
                        <option value="India">India</option>
                        <option value="Pakistan">Pakistan</option>
                        <option value="Us">Us</option>
                        <option value="other">Other</option>
                    </select>
                    <input id="other" type="textbox" name="other">
                    <input id="submit" type="submit" name="submit" value="Add Country">
                </td>
            </tr>
        </table>
    </form>
</body>

这很容易，只需将下面的代码粘贴到上面的代码即可。

并删除jquery ajax调用。

<html>
<head>
    <title>Dynamic Form</title>

</head>
<body>
<form action="post">
    <table>
        <tr>
            <td>
                <select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
                    <option value="" selected="selected">Select...</option>
                    <option value="India">India</option>
                    <option value="Pakistan">Pakistan</option>
                    <option value="Us">Us</option>
                    <option value="other">Other</option>
                </select>
                <input type="textbox" name="other" id="other" style="visibility:hidden;"/>
                <input type="submit" name="submit" value="Add Country"  style="visibility:hidden;"/>
            </td>
        </tr>
    </table>
</form>
</body>
<?php
    if(isset($_POST['other'])) {
        $Country = $_POST['other'];
        echo $Country;
    }
?>

您可以将url更改为demo.php，并将下面的url与exit();、一起使用

<?php 
   if(isset($_POST['submit'])){
       $Country = $_POST['other'];
        echo $Country; 
       exit();
  }
?>

首先更改$ajax 的url

    $.ajax({
  type: "POST",
  url: "demo.php",
  data: data
 }).done(function( msg ) {
  alert( "Data Saved: " + msg );
  });

然后更改您的"demo.php"

    <html>
<head>
<title>Dynamic Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script>
    $(document).ready(function(){
        $("form").on('submit',function(event){
            event.preventDefault();
            data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "post.php",
                data: data
            }).done(function( msg ) {
                alert( "Data Saved: " + msg );
            });
        });
    });
   </script>
  </head>
   <body>
   <?php 
         if(isset($_POST['other'])) {
       $Country = $_POST['other'];
       echo $Country;
        }
      else{
        ?>
   <form>
  <table>
       <tr>
          <td>
            <select name="one" onchange="if (this.value=='other')  {this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
                <option value="" selected="selected">Select...</option>
                <option value="India">India</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Us">Us</option>
                <option value="other">Other</option>
              </select>
               <input type="textbox" name="other"id="other"style="visibility:hidden;"/>
    <input type="submit" name="submit" value="Add Country"style="visibility:hidden;"/>
        </td>
    </tr>
 </table>
  </form>
    <?php } ?>
</body>

试试这个

     <script>
        $(document).ready(function(){
            $("form").on('submit',function(event){
                event.preventDefault();
                var yData = $(this).serialize();
                $.post('demo.php', {action:"other",yourData:yData}, function(msg) {
             alert( "Data Saved: " + msg );
            });
        });
    </script>
<?php
if($_REQUEST['action']=="other")
{
    $country= $_REQUEST['yourData'];
    echo $country;
    exit;
}
?>

希望这能对您有所帮助，但我不明白"data"是什么。请确保它是一个字段或变量，提供页面所需的值。

$("form").on("submit",function() {
            $.ajax({
                type : "GET",
                cache : false,
                url : "post.php",
                data : {
                    data : data
                },
                success : function(response) {
                    $('#content').html(response);
                }
            });
        });