test.php的

Question

jquery-ajax: pass values from a textfield to php file and show the value

我只使用一个文件而没有div标签对上面的链接进行了修改。

test.php的

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){

    var dataString = $("#inputtext").val();

     $.ajax({
             type: "POST",
             url: "test.php",
             data: "dataString=" + dataString,
             success: function(result){
                 window.location.reload(true);
              }
          });   


    window.location.reload(true);
  });
});
</script>
</head>
<body>

<input type="text" id="inputtext">
<input type="button" id="submit" value="send">



<?PHP

if(isset($_POST['dataString'])){

$searchquery = trim($_POST['dataString']);

print "Hello " . $searchquery;

}

?>

</body>
</html>

来自dataString的

值将不会显示。为什么呢？

Answer 1

很抱歉这个问题，但是使用ajax重新加载同一页面有什么意义？用它来调用另一个页面，然后加载结果，而不是你正在做的方式。试试这个

在test.php中：

$("#submit").click(function(){

    var dataString = $("#inputtext").val();

     $.ajax({
             type: "POST",
             url: "anothepage.php",
             data: dataString,
             success: function(result){
                 $('#result').html(result).
              }
          });   
     return false; //so the browser doesn't actually reload the page
  });

你应该使用表格，而不仅仅是输入。并为它们使用name属性，或者php不会选择值！ ID适用于javascript和css。

    <form method="POST" action="">
    <input type="text" id="inputtext" value="" name="inputtext">
    <input type="submit" id="submit" value="send" name="submit">
    </form>

<div id="result"> <!-- result from ajax call will be written here --> </div>

在anotherpage.php中：

if(isset($_POST['inputtext'])){

$searchquery = trim($_POST['inputtext']);

echo htmlentities($searchquery); // We don't want people to write malicious scripts here and have them printed and run on the page, wouldn't we? 
}

Answer 2

使用JavaScript刷新页面时，会丢失发送到页面的所有POST参数。这就是为什么你从未见过任何有效结果的原因之一。

您也错过了使用AJAX带来的好处 - 部署AJAX的一个动机是删除刷新页面的要求，同时仍然接受和处理用户输入。

如果您希望在提供HTML的同一页面上处理来自AJAX的数据，这里有一个基于您提供的代码的工作示例。

<?php 
if( isset($_POST['dataString']))
{
    echo 'Hello ' . trim( $_POST['dataString']);
    exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Testing jQuery AJAX</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#submit").click(function(){
                var dataString = $("#inputtext").val();
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: "dataString=" + dataString,
                    success: function( data){
                        alert( data);
                    }
                });   
            });
        });
    </script>
</head>
<body>
    <form action="test.php" method="post">
        <input type="text" id="inputtext" />
        <input type="button" id="submit" value="send" />
    </form>
</body>
</html>

jquery-ajax：将值从textfield传递给php变量（同一个文件）

test.php的

2 个答案: