javascript - 如何将JSON数组传递给php中字符串内的javascript函数

Question

我正在开发一个发票系统，我的 mvc 框架中的控制器现在使用单引号括起来的字符串。我是 javascript 的新手，但我无法避免它。我有在 window.onload 声明中工作和验证的函数，但表单内的相同声明会产生错误。html输出为：

onclick="verifyAccount('{"1":null,"2":null,"3":null,"4":null,"5":null,"8":null,"9":null,"10":null,"21":null,"22":null}');" >

所有值都是空的，因为没有创建任何值。在 Firebug 中，我收到错误“SyntaxError：未终止的字符串文字”。我不知道需要什么来解决这个问题。导致错误的行是：

    <input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\');" >

    $form = '
    <script type="text/javascript">

    window.onload = function() {
    document.getElementById("addLabor").onclick = function(){ addLabor("labor"); }
    document.getElementById("addPart").onclick = function(){ addPart("parts"); }
    document.getElementById("addAdjustment").onclick = function(){ addAdjustment("adjustments"); }
    document.getElementById("customer_id").onchange = function() { verifyAccount(\''.$accounts.'\'); }
    addLabor("labor");

    }

    </script>
$form = '
<script type="text/javascript">

window.onload = function() {
    document.getElementById("addLabor").onclick = function(){ addLabor("labor"); }
    document.getElementById("addPart").onclick = function(){ addPart("parts"); }
    document.getElementById("addAdjustment").onclick = function(){ addAdjustment("adjustments"); }
    document.getElementById("customer_id").onchange = function() { verifyAccount(\''.$accounts.'\'); }
    addLabor("labor");

    }

    </script>

    <form method="POST" class="formTable" id="addInvoice" action="/invoices/save"
onsubmit="return(validate());">
        <table class="buttons" >
            <tr>
            <td><input type="button" id="addLabor" value="Add labor"/></td>
            <td><input type="button" id="addPart" value="Add part"/></td>
            <td><input type="button" id="addAdjustment" value="Adjust"/></td>
            <td><input type="submit" name="Save" value="Save" /></td>
        </tr>
    </table>
    <table id="invoiceTable">
        <tr>
            <td><label>Date:</label></td>
            <td><input type="text" id="date" name="date" maxlength="10" size="4" />
                <a href="javascript:NewCal(\'date\',\'MMDDYYYY\')">
                <img src="/images/cal.gif" width="16" height="16" alt="Pick a date"></a>
            </td>
        </tr>
        <tr>
            <td><label>Use Account?:</label></td>
            <td><input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\')" ></td>
        </tr>
        <tr>
            <td><label>Work Order Number:</label></td>
            <td><input type="text" name="number" id="number" maxlength="8" size="6" /></td>
        </tr>
        <tr>
            <td><label>Customer:</label></td>
            <td><select name="customer_id" id="customer_id" >'.$select.'</select></td>
        </tr>
        <tr>
            <td><label>Job Name:</label></td>
            <td><input type="text" name="job_name" id="job_name" /></td>
        </tr>
    </table>
    <table id="labor"></table>
    <table id="parts"></table>
    <table id="adjustments"></table>
    <table id="payment"></table>

    </form>';
        $this->component($form);
     <form method="POST" class="formTable" id="addInvoice" action="/invoices/save"
onsubmit="return(validate());">
    <table class="buttons" >
        <tr>
            <td><input type="button" id="addLabor" value="Add labor"/></td>
            <td><input type="button" id="addPart" value="Add part"/></td>
            <td><input type="button" id="addAdjustment" value="Adjust"/></td>
            <td><input type="submit" name="Save" value="Save" /></td>
        </tr>
    </table>
    <table id="invoiceTable">
        <tr>
            <td><label>Date:</label></td>
            <td><input type="text" id="date" name="date" maxlength="10" size="4" />
                <a href="javascript:NewCal(\'date\',\'MMDDYYYY\')">
                <img src="/images/cal.gif" width="16" height="16" alt="Pick a date"></a>
            </td>
        </tr>
        <tr>
            <td><label>Use Account?:</label></td>
            <td><input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\')" ></td>
        </tr>
        <tr>
            <td><label>Work Order Number:</label></td>
            <td><input type="text" name="number" id="number" maxlength="8" size="6" /></td>
        </tr>
        <tr>
            <td><label>Customer:</label></td>
            <td><select name="customer_id" id="customer_id" >'.$select.'</select></td>
        </tr>
        <tr>
            <td><label>Job Name:</label></td>
            <td><input type="text" name="job_name" id="job_name" /></td>
        </tr>
    </table>
    <table id="labor"></table>
    <table id="parts"></table>
    <table id="adjustments"></table>
    <table id="payment"></table>


</form>';
        $this->component($form);

Answer 1

问题是所有的双引号，它保持开始和结束字符串。这导致onclick值只是：

onclick="verifyAccount('{"

其余的充其量是附加属性或只是垃圾。

作为值的一部分的双引号需要转义/编码，这可以通过以下方式完成htmlentities：

'... onclick="verifyAccount(\''.htmlentities($accounts).'\');" ...'

---

不过，另一种选择是利用 JSON 与 JavaScript 的关系，输出 JSON 字符串，以便将其视为JavaScriptObject文字：

'... onclick=\'verifyAccount('.$accounts.');\' ...'

或者，如果$results仍需要编码为 JSON：

'... onclick=\'verifyAccount('.json_encode($accounts).');\' ...'

导致：

<... onclick='verifyAccount({"1":null,"2":null",...})'>

这个的依赖是verifyAccount需要调整以期望 aObject而不是 a String。

Answer 2

这是我的建议

脚本：

var account = <?php echo json_encode($accounts)?>;

或者如果您由于某种原因无法摆脱单引号：

 var account = JSON.parse('{"1":null,"2":null,"3":null,"4":null,"5":null,"8":null,"9":null,"10":null,"21":null,"22":null}');

HTML：

<input type="radio" name="account" id="account" onclick="verifyAccount(account)" />

或更改较少：

echo '<input  ... onclick=\'verifyAccount('.json_encode($accounts).');\' >';

Answer 3

我相信您只是在这里缺少连接运算符。

所以：

<input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\');" >

变成：

<input type="radio" name="account" id="account" onclick="verifyAccount('\'' + '.$accounts.' + '\'');" >

你可以在这里纠正我，但我相信这是你试图插入那里的 PHP 变量，所以它真的应该变成：

   

<input type="radio" name="account" id="account" onclick="verifyAccount('\'' + '.<?php echo $accounts ?>.' + '\'');" >

Answer 4

为了防止单引号 ( ') 和双引号 ( ") 破坏您的onclick封装，您需要去掉两者之一。由于我偏爱属性中的双引号，并考虑到json_encode返回双引号，这就是我所做的：

echo '<input type="radio" name="account" id="account" onclick="verifyAccount('.htmlspecialchars(json_encode($accounts)).');"/>';

例如，以下对象将按预期工作：

array('user1' => 'Username is \'quit3" strange and \\ problematic!');

它将由 PHP 导出到：

{"user1":"Username is 'quit3\" strange and \\ problematic!"}

所以它结束于：

<label><input type="radio" name="account" id="account" onclick="var user ={&quot;user1&quot;:&quot;Username is 'quit3\&quot; strange and \\ problematic!&quot;}; console.log(user.user1);"/> Click me!</label>