如何将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而不是a String.