如何在同一页面中调用ajax页面？答案

【问题标题】：How to call the ajax page in same page?如何在同一页面中调用ajax页面？
【发布时间】：2013-12-03 12:22:10
【问题描述】：

我有两个文件 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 数据而不将数据从一个页面传递到另一个页面。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

更改 ajax 的网址

$.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;
    }
?>

【讨论】：

【解决方案2】：

我有一些个人意见：

第一个方法是：我认为拥有两个单独的文件并不是一个坏主意。这并不是一个很好的优化。现在您想要一个文件以两种不同的方式处理 GET 请求和 POST（一种用于 AJAX，另一种用于普通 POST，以防您希望您的 javascript 优雅降级。
您可能想要删除“onchange”属性。查看 Unobtrusive JavaScript 的概念，了解为什么这是一种好的做法
永远不要相信用户输入：始终适当地清理和验证
波纹管是您文件的重写版本。通知我已经用更易于维护的东西重构了onChange，并且我正在使用 JS 来对输入和提交按钮进行初始隐藏。这样，如果 JS 被禁用，用户仍然可以添加国家/地区。

为了确定帖子是如何被触发的，我将一个额外的标志 ajax=1 传递给帖子。

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

动态表格 $(文档).ready(函数(){ $('#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>

【讨论】：

【解决方案3】：

这很简单，只需将下面的代码粘贴到上面的代码中即可。

并删除 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;
    }
?>

【讨论】：

【解决方案4】：

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

<?php 

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

【讨论】：

【解决方案5】：

首先你改变$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>

【讨论】：

【解决方案6】：

试试这个

     <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;
}
?>

【讨论】：

【解决方案7】：

希望这会对您有所帮助，但我不明白什么是“数据”。确保它是提供页面所需值的字段或变量。

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

【讨论】：