Question

让我详细解释一下我想要实现的目标。我有3个页面：index.html，form.html和result.php。当我点击index.html中的按钮时使用jquery，它将在index.html中的div中加载form.html。 form.html on submit调用result.php。我想要实现的是当我单击form.html中的提交按钮（在index.html中加载）时，result.php的结果将显示在我加载form.html的index.html的div中。以下是所有3页的代码。任何帮助都会很棒。

index.html内容：

<html>
   <head>
       <title>index.html</title>
       <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
   </head>
   <body>
   <script type="text/javascript">
   $(document).ready(function () {
   var theme = getTheme();
   $("#loadformbutton").jqxButton({ width: '120', height: '30', theme: theme });
   $("#loadformbutton").bind('click',function()
   {
        $('#div_for_form').load('form.html', function() {});
   });
   });
   </script>
   <div id="buttons">
      <input type="button" value="loadform" id='loadformbutton' />
   </div>
   <div id="div_for_form">
      Here loads form.html
   </div>
   </body>
</html>

form.html的内容：

<html>
   <head>
      <title>form.html</title>
   </head>
   <body>
      <form method="POST" action="result.php">
         <input type="password" name="pass" id="pass"/>
         <input type="submit" value="Ok" id="changepass"/>
      </form>
   </body>
</html>

result.php的内容：

<?php
   $received=$_POST['pass'];
   echo 'Received: '.$received;
?>

此时它正常运行，但result.php的结果显示在新页面中。

Answer 1

不要以正常方式提交表单，而是考虑使用Ajax（例如jQuery.post（））调用result.php。然后，您可以使用success-callback注入返回的值。

Answer 2

你可以通过jquery做到这一点，下面的ajax是简单的方法

result.php的内容：

<?php
   $received=$_POST['pass'];
   echo 'Received: '.$received;
?>

制作一个ajax请求，如表格id =“from_one”

$("#from_one").submit(function(){
$.ajax({
  url: 'result.php',
  type: "POST",
  data:{pass:$('input[type=pass]')}
  success: function(data) {
     //here append the result to the div you want 
     // in data you will get the result 
  }
});
});

Answer 3

$('#changepass').click(function(){
var id = $('input#pass').val();
$.post( 'http://domain.com/result.php' { id : id },
        function(response){
            $('div#div_for_form').html(response);
        });

});

Answer 4

在div中包含您的results.php，以便将其放在正确的位置。

Answer 5

尝试下面的一个：

在form.html更改表单标记中：

<form method="POST" action="" onsubmit="return callphp()">

在index.html中添加函数callphp（）：

function callphp()
{
  var xmlhttp;
     if (window.XMLHttpRequest)
        {
       xmlhttp=new XMLHttpRequest();
        }
     else
        {
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
     xmlhttp.onreadystatechange=function()
        {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
         document.getElementById("div_for_form").innerHTML=xmlhttp.responseText;

      }
      }  
       xmlhttp.open("POST","result.php",true);
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xmlhttp.send();
}

Answer 6

如果你打算做一个更大的项目（不仅仅是这两个网站），我建议你创建一个网站模板（对于你的index.html）

你可以找到一个好的方法here

在div中显示php结果

6 个答案: