Javascript从PHP获取内容[重复]答案

【问题标题】：Javascript get content from PHP [duplicate]Javascript从PHP获取内容[重复]
【发布时间】：2013-10-09 06:23:12
【问题描述】：

我有一个接受参数的 php 页面，例如

mypage.php?keyword=SOMEVALUE

但关键字是用户在使用 jQuery 运行的 html 表单中输入的 ajax 值。

我需要喜欢让用户在文本字段中输入值，并从mypage.php中检索数据并将其设置为field1的值。

我该怎么做？我看到一些网站提到 javascript 尊重同源政策，我该怎么办？

现在我有 2 个文件

再次更新

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

       <script type="text/javascript">
            $(document).ready(function(){
                $("#filter").click(function(){{
                    var self = this;
                    //The following mostly from Olaf's answer
                    $.ajax({
                        url         :   'jquery2.php',
                        dataType    :   "html",/* JSON, HTML, SJONP... */
                        type        :   "get", /* POST or GET; Default = GET */
                        data:{
                            keyword     :   $(keyword).val() /* $(self) = $("#keyword") */
                        },
                        success     :   function( response )
                        {
                            /*
                            *    on input
                            */
                            $("#keyword").val( response )
                            /*
                            *    on html
                            */
                            $("#newhtml").html( response )
                        }
                    });
                });
            });
        </script>


    </head>
    <body>
        <input type="text" name="keyword" id="keyword" />
        <input type="button" id="filter" name="filter" value="Search Data" />
        <div id="newhtml"></div>
    </body>
</html>

jquery2.php

<?php
$keyword = $_GET['keyword'];

echo "keyword is " . $keyword;


?>

我将 jquery.php 更改为此代码。但仍然无法从 jquery2.php 检索输出，文本字段值不会更改为 jquery2.php 输出。

感谢您的帮助

【问题讨论】：

你认为同源策略是什么？
@PeeHaa 谷歌搜索后我意识到它的许可操作来自同一个站点，这应该没有问题，最初我认为它需要相同的“页面”。感谢您的澄清。

标签： javascript php jquery

【解决方案1】：

我建议使用 jQuery 的 ajax 方法，因为这会使事情变得更容易。假设您的 php 页面是这样的：

PHP

$keyword = $_GET['keyword'];

if ($keyword == "SOMEVALUE") {
echo "returned value";
}

你的 html 是这样的：

HTML

<input type='text' name='keyword' id='keyword' />

那么你的javascript应该是这样的：

Javascript

$(document).ready(function(){
  $("#keyword").change(function(){
    var newValue;
    //The following mostly from Olaf's answer
    $.ajax({
      url         :   'index.php',
      dataType    :   "html",/* JSON, HTML, SJONP... */
      type        :   "get", /* POST or GET; Default = GET */
      data:{
          keyword     :   "SOMEVALUE"
      },
      success     :   function( response )
      {
          newValue = response;
      }
    });
    $(this).val(newValue);
  });
});

【讨论】：

如果我有一个文本字段，旁边是一个“搜索按钮”，它是一个提交按钮值，我如何注意到事件变化并执行 ajax 查询
在上面的html中，添加<input type='submit' id='search' value='Search Button' />，在上面的javascript中，将$("#keyword").change(function(){改为$("#search").click(function(){

【解决方案2】：

在 PHP 中，您必须检索关键字

$keyword = $_GET['keyword'];

然后，假设您通过 PHP 输出 HTML 和 JavaScript（在脚本元素内），

$.ajax({
    url: 'mypage.php',
    type: 'GET',
    data: {
        keyword: '<?php echo $keyword; ?>'
    },
    success: function (data) {
        // Display the result in the "field1"
        $('#field1').val(data);
    }
});

【讨论】：

【解决方案3】：

假设您有以下文本输入

<input type = "text" id = "name"/>

然后使用下面的ajax代码

$.ajax({
    url: 'mypage.php?keyword='+$("#name").val(),
    type: 'GET',
    success: function (data) {$("#name").val(data);}
});

【讨论】：

感谢您的帮助。我更新了我的问题

【解决方案4】：

尝试：

jQuery：

$(document).ready(function(){

    $.ajax({
        url         :   'index.php',
        dataType    :   "html",/* JSON, HTML, SJONP... */
        type        :   "get", /* POST or GET; Default = GET */
        data:{
            keyword     :   "SOMEVALUE"
        },
        success     :   function( response )
        {
            console.log( response ) ;
        }
    });

})

PHP：

<?php

if( array_key_exists( "keyword" , $_GET ) )
{
    if( !empty( $_GET["keyword"] ) )
    {
        echo "<p>Woooow ajax!</p>";
    }
}
?>

使用 PHP 获取“SOMEVALUE”：

echo $_GET["keyword"]

使用 jQuery 获取“SOMEVALUE”：

data:{
    keyword: $( "input" ).val()
}

或在您的 JQUERY 中使用 PHP：

<?php
if( array_key_exists( "keyword" , $_GET ) )
{
    $keyword = htmlentities ($_GET["keyword"],ENT_COMPAT,'UTF-8', true );
    $keyword = str_replace("'","\'",$keyword);
    echo "var keywordValue =  '" . $keyword."';"
}else{
    echo "var keywordValue = '';";
}
?>
data:{
    keyword: keywordValue
}

您的代码已编辑：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $( "#search" ).submit(function(){

                    /**
                    * Send ajax
                    */
                    $.ajax({
                        url         :   'jquery2.php',
                        dataType    :   "html",/* JSON, HTML, SJONP... */
                        type        :   "get", /* POST or GET; Default = GET */
                        data:{
                            keyword     :   $( self ).val() /* $(self) = $("#keyword") */
                        },
                        success     :   function( response )
                        {
                            /**
                            * Get Data and set on field2
                            */
                            $("#filter").val( response )
                        }
                    });


                    /* prevent event */
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <input type="text" name="keyword" id="keyword" />
        <input type="hide" name="filter" id="filter" />
        <input type="submit" value="Go!" />
    </body>
</html>

【讨论】：

不显示如何从表单中获取"SOMEVALUE"
@Izkata OP 说他正在使用 jQuery。
@fedeetz 是的，我第一遍就错过了。我也刚刚将它编辑到标签中，所以现在很明显。
感谢您的帮助，我更新了我的问题。
@user1777711 显示我的代码 ;)