如何提交表单并在当前页面的Div中加载目标页面

How to Submit a form and load target page inside a Div on the Current page?

本文关键字：Div 加载 目标 当前页 何提交 提交 表单      更新时间：2023-09-26

我是JavaScript的新手，没有找到一个可以执行以下操作的工作脚本:

我有一个隐藏的JavaScript表单，应该在onclick事件上提交。表单中的字段在目标PHP文件中用于创建输出。目标PHP文件应该加载到当前页面的div中，而不需要重新加载整个页面。

问题是我不能让目标PHP文件加载到当前页面的div内，但目标PHP页面只是加载显示我想要在div内的结果。

任何帮助将非常感激!

Update # 1

我做了一个关于jQuery ajax请求的YouTube教程，其中结果显示在同一页面的div中。我反复检查了代码很多次，它看起来和教程中的一样。在教程中，代码是工作的，但对我来说，它不是。下面是我使用的所有文件和代码。

ajax。:

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//
$(document).ready(function(){
$("#button").click(function(){
var sendu = $("#username").val();
var sendp = $("#password").val();
$.ajax({
type="POST",
url: "ajax.php",
data: "username="+sendu+"&password="+sendp,
dataType: "json", 
success: function(msg,string,jqXHR){
$("#result").html(msg.name+"<br />"+msg.password);
}
});
});
});

</script>
</head>
<body>
Name:<input type="text" id="username" name="username" /><br />
Password:<input type="password" id="password" name="password" /><p>
<input type="button" id="button" value="submit" />
<p><div id="result"></div>
</body>
</html>

jquery.js from this url:http://code.jquery.com/jquery-1.6.2.min.js

ajax.php: 

<?
$name = $_REQUEST['username'];
$password = $_REQUEST['password'];
$list = array('name'=>$name, 'password'=>$password);
$c = json_encode($list);
echo $c;
?>

我使用WAMP服务器作为我的本地主机，它可能与设置有关吗?

由于您没有提供代码，所以我不得不猜测:

1)您有AJAX代码加载php响应到一个划分，但页面仍然刷新，在这种情况下-当表单提交时，您需要防止默认事件触发，这样做: 
event.preventDefault();

将其作为在onClick()中执行的函数中的第一件事。现在应该都能工作了。顺便说一句，你可能想要onSubmit()代替，以防有人点击"Enter"而不是点击"提交"按钮(虽然我不确定它是否是标准javascript/DOM的一部分)。查看一个名为JQuery的javascript库，它使javascript变得轻而易举。

2)你真的想要AJAX，在这种情况下，去jquery.com，下载他们的javascript库，并通过一些教程AJAX请求。基本内容如下:

$("#id_of_your_form").submit(function(event){
    event.preventDefault();
    $.post( url_of_php_file, $("#id_of_your_form").serialize(), function(data){
        $("#id_of_your_div").html(data);
    });
});

这段代码是基本的，但是应该可以工作，只要你记得在你的。html文件中包含这个库文件。

#更新

你使用JSON对象有什么特别的原因吗?我只是以前没用过，所以我的输入可能有限。试试这个:

ajax。

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//
$(document).ready(function(){
    $("#button").click(function(event){ //don't forget to pass the event as an argument
        //need this, or your page will follow the url defined in the form
        event.preventDefault();
        var sendu = $("#username").val();
        var sendp = $("#password").val();
        $.ajax({
        type: "POST",
        url: "ajax.php",
        data: "username="+sendu+"&password="+sendp, /*shouldn't the method be GET then?*/
        dataType: "json", 
        success: function(msg){
            $("#result").html(msg.name+'<br />'+msg.password);
        }
        });
    });
});

</script>
</head>
<body>
    <form action="miss.php" method="post">
        Name:<input type="text" id="username" name="username" /><br />
        Password:<input type="password" id="password" name="password" /><p>
        <input type="submit" id="button" />
    </form>
<p><div id="result"></div>
</body>
</html>

ajax.php 

<?
$name = $_POST['username']; //use $_POST array instead
$password = $_POST['password'];
$list = array('name'=>$name, 'password'=>$password);
$c = json_encode($list);
echo $c;
?>

(注意:我没有检查php代码，因为我说过，我不太熟悉JSON对象)如果不是特别需要json对象，可以尝试使用标准的text/xml来简化。另外，考虑使用$。用代替$。Ajax ，它应该使事情变得更容易。

此外，不要忘记使用形式标签在你的输入或你的html将是无效的(需要引用)，最后，如果你在你的javascript html工作，它可能是一个好主意，使用单引号而不是双引号来表示你的字符串。希望对你有所帮助。

#更新2

好吧，因为你不需要JSON的基本内容(JSON留到以后)，使用文本/xml代替。还有，看看评论。如果WAMP正在运行并且两个文件都在同一个文件夹中，那么这应该都可以工作。下面是代码:

ajax。

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//
$(document).ready(function(){
    $("#login_form").submit(function(event){    //don't forget to pass the event as an argument
        //need this, or your page will follow the url defined in the form
        event.preventDefault();
        var sendu = $("#username").val();
        var sendp = $("#password").val();
        $.post("ajax.php", {'username' : sendu, 'password' : sendp}, function(data){
            $("#result").html(data); //data is everything you 'echo' on php side
        });
    });
});

</script>
</head>
<body>
    <form action="miss.php" method="post" id="login_form">
        Name:<input type="text" id="username" name="username" /><br />
        Password:<input type="password" id="password" name="password" /><p>
        <input type="submit" id="button" />
    </form>
<p><div id="result"></div>
</body>
</html>

ajax.php 

    <?php
//you used shorthand <? as the php tag, it's probably why your code didn't work
//I would discourage using the shorthand, it's silly
$name = $_POST['username']; //use $_POST array instead
$password = $_POST['password'];
echo $name.'<br />'.$password;
?>

如果这不起作用…检查你是否有skype运行，由于某种原因WAMP不能与skype同时工作，这很奇怪。

您可以使用Ajax。Ajax的运行将允许您刷新页面的某些部分而不是重新加载页面，在您的示例中，这是提交表单并在当前页面上加载目标。我建议您从jQuery开始。

问题是表单还在提交，当我做你想做的事情时，我做的有点不同。试试这个

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function gO(frM){
    $.ajax({
        type:"POST",
        url: "ajax.php",
        data: frM.serialize(),
        dataType: "json", 
        success: function(msg,string,jqXHR){
            $("#result").html(msg.name+"<br />"+msg.password);
        }
    });
}
</script>
</head>
<body>
    <form action="" onsubmit="javascript:gO(this);return false;">
       Name:<input type="text" id="username" name="username" /><br />  
       Password:<input type="password" id="password" name="password" /><p>
       <input type="button" id="button" value="submit" />
     </form>
<p><div id="result"></div>
</body>
</html>
相关文章：