Question

我正在尝试使用以下代码在JS函数中传递php表单值 -

<script type="text/javascript">
var titleV = document.getElementById("mrp-title-<?php echo $sequence ?>").value;

var commentV = document.getElementById("comment-<?php echo $sequence; ?>").value;

mrp_data_callbacks.push( function(index, data) {
data["<?php echo "htitle-" . $sequence ?>"] = titleV;
return data;
});

mrp_data_callbacks.push( function(index, data) {
data["<?php echo "comment-" . $sequence ?>"] = commentV;
return data;
});
</script>

得到这样的东西 -

jQuery(document).ready(function() { 
mrp_data_callbacks.push( function(index, data) {
data["hello"] = "world";
return data;
});
});

我直接尝试了这个 -

 mrp_data_callbacks.push( function(index, data) {
        data["<?php echo "htitle-" . $sequence ?>"] = "<?php echo $htitle ?>";
        return data;
    });

我遇到的问题是这些值会不断更新，并使用其他js / ajax文件上的脚本进行处理。所以试图直接在回调函数中回显php值没有用，我被告知在哪里 -

混合PHP和JavaScript无法工作（服务器端与客户端）。如果   htitle已更新，值不会更新。例如。如果是htitle   “Hello”然后回调函数将始终是：   mrp_data_callbacks.push（function（index，data）{data [“World”] =   “世界”;返回数据; }）;应该回调函数   填充表单上字段的值以在AJAX中提交   请求。因此，您应该使用JavaScript而不是PHP来获取更新   HTML表单中的值。

的确，如果你有一个用户填写的HTML表单，那么那些   在提交表单之前，PHP不知道修改后的值。 PHP   传递给服务器时只做某事，而不是   用户滚动浏览网页，填写文本。那就是那个   你应该使用javascript。

那么我怎样才能使这些值更新并且脚本有效？

修改

表单由插件生成，相关代码如下所示--- http://pastebin.com/RrjJqaFB - 表单的模板

http://pastebin.com/tp8Gxv8B - Frontend.js - 这是完成ajax并定义回调函数的地方。

Answer 1

使用AJAX或WebSocket完成，使用jQuery，您可以使用以下内容：

<强> JS：

$('#username').on('change input', function(){
  var username = $(this).val();
  // Here you send - post - data to the .php file which deals with as 
  // a regular post request, some thing could be said for $.get as GET request
  $.post('check_username.php', { username : username}, function(data){
    if(data == 1){
      // if data was 1, means the php found that username already in
      // the database and echoed 1 back
      $(this).addClass('errorMsg').text('This username is already taken.');
    }
  });
});

<强> PHP：

if(isset($_POST['username'])){
    $username = escape($_POST['username']);
    $validate = new Validation();
    $validation = $validate->checkUniq('users', 'username', $username);
    $validation = ($validation == 0) ? 0 : 1;
    echo $validation;
}

使用jQuery为您提供$.ajax()，$.post()，$.get()等功能，后两个功能是快捷方式。

但是，如果您希望大量用户使用表单处理相同数据，并且您不断向所有用户反弹数据，那么这些用户会在服务器上施加大量负载。

另一方面，web WebSocket通过打开服务器和用户之间的连接通道来工作，这个连接通道保持打开状态，直到用户断开连接，不知何故，这对服务器没有太大的负担，我尚未与WebSocket合作，但我已经阅读了几篇文章，并在YouTube上观看了几个视频，其中大部分都是关于创建实时聊天应用或多用户网页游戏。

WebSockets Examples

对于PHP，this PHP-Websockets和Ratchet library，以及此WebSockets the UNIX way，这不仅适用于PHP。

更新1： 根据OP的评论，我们假设我们有类似的 - 但更简单的 - 情况，所有文件都在同一文件级别上：

data.txt： - 仅用于代替数据库进行演示

title 0 , comment number 0
title 1 , comment number 1
title 2 , comment number 2

<强> JS

$(document).ready(function() { 

    // for initializing we call fetchData function as soon as DOM is ready
    // then re-call it every 10,000 milliseconds to update the input values with new
    // fetched data , that could have been changed by other users.
    fetchData();
    setInterval(fetchData, 10000);


    // on any button click we get the numeric index value, using this value
    // to pick correspnding title and comment values, then send a POST
    // request to foo.php and on response data we call updateHTML
    $('.buttons').on('click', function(){
        indexV = $(this).attr('id').replace('btn-', '');
        titleV = $('#mrp-title-' + indexV).val();
        commentV = $('#comment-' + indexV).val();
        $.post('foo.php', { index : indexV, title:titleV, comment: commentV}, function(data){
           if(data){
                updateHTML(data);
            }
        });
    });


    // Making a get request to fetch fresh data
    function fetchData(){
        $.get('foo.php', function(data){
            updateHTML(data);       
        });
    }

    // Update title and comment inputs values
    function updateHTML(data){
        var titleID, titleV, commentID, commentV, indexV, content;
        // using jQuery parseJSON function to convert the JSON response
        // to and array, then loop through this array to update inputs
        // with new title and comment values.
        content = $.parseJSON(data); 
        for(var i = 0; i < content.length; i++){
            titleID = '#mrp-title-' + i;
            titleV = content[i].title,
            commentID = '#comment-' + i;
            commentV = content[i].comment;
            $(titleID).val(titleV);
            $(commentID).val(commentV);
        }
    }
});

<强> HTML：

<!-- this is usually generated with PHP --> 
<div id="output">
    <label for="mrp-title-0">Title #0:</label>
    <input type="text" id="mrp-title-0" class="titles" value="">
    <label for="comment-0">Comment #0:</label>
    <input type="text" id="comment-0" class="comments" value="">
    <button id="btn-0" class="buttons">Save Changes</button>
    <hr>
    <label for="mrp-title-1">Title #1:</label>
    <input type="text" id="mrp-title-1" class="titles" value="">
    <label for="comment-1">Comment #1:</label>
    <input type="text" id="comment-1" class="comments" value="">
    <button id="btn-1" class="buttons">Save Changes</button>
    <hr>
    <label for="mrp-title-2">Title #2:</label>
    <input type="text" id="mrp-title-2" class="titles" value="">
    <label for="comment-2">Comment #2:</label>
    <input type="text" id="comment-2" class="comments" value="">
    <button id="btn-2" class="buttons">Save Changes</button>
</div>

<强> foo.php：

<?php

if(isset($_POST['index']) && isset($_POST['title']) && isset($_POST['comment'])){
    // if there's a POST request, we retrieve the data.txt content as an array
    // depending on the POST index value we change the corresponding item in 
    // the array to update title and comment values, then write the array as
    // new content of the data.txt with the new array $foo. 
    $index = $_POST['index'];
    $title = $_POST['title'];
    $comment = $_POST['comment'];
    //Do validation and sanitizing here
    $temp = '';
    $foo = getContent();
    $foo[$index]['title'] = $title;
    $foo[$index]['comment'] = $comment;
    for($i = 0; $i < count($foo); $i++) {
        $temp .= $foo[$i]['title'] . ' , ' . $foo[$i]['comment'] . "\n";
    }
    $temp = trim($temp);
    file_put_contents('data.txt', $temp);
}else{
    // if no POST request, no changes happened and our array is same as file content
    $foo = getContent();
}

// we encode $foo as JSON and echo it back to javascript
$jsonFoo = json_encode($foo);
echo $jsonFoo;

// getting data.txt content and return an array of the content
function getContent(){
    $bar = array();
    $data = file_get_contents('data.txt');
    $rows = explode("\n", $data);
    foreach ($rows as $row) {
        $cols = explode(",", $row);
        $title = trim($cols[0]);
        $comment = trim($cols[1]);
        $bar[] = array('title' => $title, 'comment' => $comment);
    }   
    return $bar;
}

对于上述文件，即使DOM准备就绪，我们第一次调用fetchData()来使用来自数据库 - data.txt的数据填充输入值。在此示例中，为了简单起见而不是数据库 - ，然后我们使用javascript fetchData()每10秒调用一次setInterval()，这样如果某些输入值已被 userX ，所有其他用户将在10秒后看到他们的屏幕上的结果更新，假设10秒就足够了，可能不到10秒但是用户没有时间改变一个输入值，也就是更少的时间你把更多的负载放在服务器上，反之亦然。

如果您在测试服务器上创建具有相同代码的相同文件结构 - 例如 localhost - 并打开包含Chrome中所有输入字段和按钮的网页 - as userX - 和Firefox - as userY - 和IE - as userZ - 例如，更改其中一个输入字段的值，然后点击相应的＆＃34;保存更改＆＃34; button，让我们说＆＃34; Chrome＆＃34; ，您将看到相同字段的值已在＆＃34; Firefox＆＃34;中更新并且＆＃34; IE＆＃34;自动10秒后。

所以你可以让你的PHP echo让我们说$result数组 AFTER json_encode就像我的例子和javascript一样，首先使用jQuery $.parseJSON()函数将JSON对象转换为结果中的数组循环，并将每行值推送到mrp_data_callbacks，这就是它！

Answer 2

正如您所说的那样，您只从输入字段获取一次值（它将在首次加载页面时设置titleV和commentV的值）。因此，如果通过用户操作在表单中更改了任何内容，则不会存在。您需要移动在回调函数中获得titleV和commentV的代码部分。因此，在动态调用函数时，它将始终从输入获得当前值。这样的事情（有点改进） -

<script type="text/javascript">
var sequence = "<?php echo $sequence ?>";
mrp_data_callbacks.push( function(index, data) {
    var titleV = document.getElementById("mrp-title-"+sequence).value;
    data["htitle-"+ sequence] = titleV;
return data;
});

mrp_data_callbacks.push( function(index, data) {
    var commentV = document.getElementById("comment-"+sequence).value;
    data["comment-"+sequence] = commentV;
return data;
});
</script>

Answer 3

您是否尝试使用PHP生成整个JS-Code？这可能有效：

<?php
$js  = "<script type='text/javascript'>";
$js += "var sequence = " . $sequence . ";";
$js += "mrp_data_callbacks.push(function(index, data) {";
$js += "    data[" . $key . "] = " . $value . ";";
$js += "    return data;";
$js += "});";
$js += "</script>";
echo $js;
?>

Answer 4

有点令人困惑，但我认为你需要做的就是在发布表单时使用JavaScript获取值。 TaReQ MahMooD是正确的。

所以这个：

mrp_data_callbacks.push( function(index, data) {
    data["<?php echo "htitle-" . $sequence ?>"] = titleV;
    return data;
});

应该是这样的：

mrp_data_callbacks.push( function(index, data) {
    data["<?php echo "htitle-" . $sequence ?>"] = document.getElementById("mrp-title-<?php echo $sequence ?>").value;
    data["<?php echo "comment-" . $sequence ?>"] = document.getElementById("comment-<?php echo $sequence; ?>").value;
    return data;
});

丹尼尔

PHP表单值作为回调函数中的JS变量

4 个答案: