Fatal编程技术网
  • javascript/
  • Javascript 如何在同一页面中调用ajax页面？

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

javascript php jquery ajax

Javascript 如何在同一页面中调用ajax页面？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有两个文件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(

我有两个文件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>

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


动态形式
$（文档）.ready（函数（）{
$（“表格”）。在（'submit'，函数（事件）{
event.preventDefault（）；
数据=$（this）.serialize（）；
$.ajax({
类型：“POST”，
url:“post.php”，
数据：数据
}).done（函数（msg）{
警报（“保存的数据：“+msg”）；
});
});
});
选择。。。
印度
巴基斯坦
美国
其他
post.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>

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

    <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>
这很简单，只需将下面的代码粘贴到上面的代码上即可

并删除jqueryajax调用

<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（）一起使用,


首先更改$ajax的url


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


然后更改“demo.php”



动态形式
$（文档）.ready（函数（）{
$（“表格”）。在（'submit'，函数（事件）{
event.preventDefault（）；
数据=$（this）.serialize（）；
$.ajax({
类型：“POST”，
url:“post.php”，
数据：数据
}).done（函数（msg）{
警报（“保存的数据：“+msg”）；
});
});
});
选择。。。
印度
巴基斯坦
美国
其他

试试这个


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




$（文档）.ready（函数（）{
$（“表格”）。在（'submit'，函数（事件）{
event.preventDefault（）；
var yData=$（this.serialize（）；
$.post（'demo.php'，{action:“other”，yourData:yData}，函数（msg）{
警报（“保存的数据：“+msg”）；
});
});

我有一些个人观察：


    

  • 第一种方法是：我不认为拥有两个单独的文件是个坏主意。这不是一个很好的优化。现在，您需要一个文件以两种不同的方式处理GET请求和POST（一种用于AJAX，另一种用于普通POST，以防您希望javascript正常降级
    • 

  • 您可能希望删除“onchange”属性
    • 

  • 从不信任用户输入：始终适当地清理和验证
    • 

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

    

    

    
动态形式
$（文档）.ready（函数（）{
$（“#country”）。on（'change'，hideStuff）；

    //隐藏按钮以添加额外选项
$（“#其他，#提交”）.hide（）；
函数hideStuff（）
{
var select=$（此值）；
var flag=select.val（）=“其他”；
$（“#其他，#提交”）。切换（标志）；
}
$（“表格”）。在（'submit'，函数（事件）{
event.preventDefault（）；
data=$（this）.serialize（）+“&ajax=“+1；
$.ajax({
类型：“POST”，
url:$（this）.data（'url'），
数据：数据
}).done（函数（msg）{
警报（“保存的数据：“+msg”）；
});
});
});

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

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