代码之家 › 专栏 › 技术社区 › Matt

如何从ajax php函数中获取html和javascript?

coding-style ajax html javascript php

Matt · 技术社区 · 14 年前

我只是写了一些代码,看了一遍,想哭。以'\');“>”结尾的行不是好事。

我正在编写一个ajax函数来返回要添加到表中的新行。该行使用javascript进行用户编辑。

$ident=mysql_insert_id().'_c_label';

    $html='<tr>';
        $html.='<td class="label" id="'.$ident.'" onclick="editTextStart(\''.$ident.'\');">';
            $html.='<div>';
                $html.='<span id="'.$ident.'_field">'.self::default_label.'</span>';
                $html.='<input id="'.$ident.'_input" type=text onblur="editTextEnd(\''.$ident.'\');" onclick="editTextEnd(\''.$ident.'\');"/>';
            $html.='</div>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
    $html.='</tr>';

    return $html;

那么,我应该如何从php中获取html和javascript变量呢?

2 回复 | 直到 14 年前

T.J. Crowder 14 年前

使用外部JavaScript文件,该文件包含在 script </body> 标记(或 head attachEvent (IE)或 addEventListener (标准)。

<table id='niftyStuff'>
    <tbody>
        <tr>
            <td>Cool</td>
            <td>Stuff</td>
        </tr>
        <tr>
            <td>Cool</td>
            <td>Stuff</td>
        </tr>
    </tbody>
</table>

然后使用直接的JavaScript+DOM方法,您可以将单击处理程序连接到如下单元格:

var table, cells, index;
table  = document.getElementById('niftyStuff');
cells = table.getElementsByTagName('td');
for (index = 0; index < cells.length; ++index) {
    hookEvent(cells.item(index), 'click', clickHandler);
}

function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

// Convenience function defined somewhere to smooth out IE/Standards
function hookEvent(element, name, handler) {
    if (element.attachEvent) {
        element.attachEvent("on" + name, handler);
    }
    else if (element.addEventListener) {
        element.addEventListener(name, handler, false);
    }
    else {
        throw "Unsupported browser";
    }
}

(或者您可以定义 hookEvent

不是话题,但如果 钩形通风口 看起来很尴尬 jQuery , Prototype , YUI , Closure any of several others 确实有助于消除这些浏览器差异。

例如,使用jQuery:

$('#niftyStuff td').click(clickHandler);
function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

( 编辑 live example 对于上述情况。)

带原型:

$$('#niftyStuff td').invoke('observe', 'click', clickHandler);
function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

离题 脚本 将可靠地准备好被搜查等,你 don't have to wait window.onload 它发生得太晚,太晚,或者依赖于“准备好的”事件。但是,如果脚本文件不是来自浏览器缓存,则在连接之前,页面可能会延迟显示(以及用户单击)。在上面,您的页面显示得更快(因为脚本文件没有在 头 );缺点是,你可能不希望他们在你准备好之前点击就感到沮丧(尽管差距很小)。所以你把它放在哪里,是这些东西之间的平衡。如果你担心有人点击,把脚本放进去 头 但是在结尾有一个小的脚本标记 body ready 事件(大多数库提供它们)。或者有复杂的策略使用一个小的内联脚本来捕获和延迟点击。

lonesomeday 14 年前

$default_label = self::default_label;
$html = <<<HTML
<tr>
  <td class="label" id="$ident" onclick="editTextStart('$ident');">
    <div>
      <span id="{$ident}_field">{$default_label}</span>
      <input id="$ident_input" type=text onblur="editTextEnd('$ident')" onclick="editTextEnd('$ident');"/>
    </div>
  </td>
  <td>
  </td>
  <td>
  </td>
  <td>
  </td>
</tr>
HTML;

return $html;

注意,这使用 heredoc syntax ,这是StackOverflow的解析器无法处理的,因此格式很难看。

您还可以使用 addEventListener / attachEvent