Question

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

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

Answer 2

我有一些个人观察：

方法中的第一个：我认为拥有两个单独的文件并不是一个坏主意。这不是一个很好的优化。现在，您希望单个文件以两种不同的方式处理GET请求和POST（一个用于AJAX，一个用于普通POST，以防您希望javascript正常降级。
您可能想要删除“onchange”属性。调查Unobtrusive JavaScript的概念，了解为什么这是一种好的做法
绝不信任用户输入：始终清理并验证
bellow是您重写文件的一个版本。注意事项我已经考虑了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;
    }
?>

动态表格 $（文件）。就绪（函数（）{ $（'＃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>

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

Answer 4

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

<?php 

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

Answer 5

首先更改$ ajax的网址

    $.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>

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

Answer 7

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

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

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

7 个答案: