如何将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}');" >

所有值都为null，因为没有创建任何值。 在Firebug中我收到错误“SyntaxError：unterminated string literal”。 我不知道解决这个问题需要什么。 导致错误的行是：

    <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字符串，以便将其视为JavaScript Object文字 ：

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

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

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

导致：

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

这种依赖性是需要调整verifyAccount以期望Object而不是String 。

Answer 2

这是我的建议

JavaScript的：

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

或者，如果你由于某种原因无法摆脱单个qutotes：

 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>