onclick 调用对象仅在 Firefox 中有效答案

【问题标题】：onclick calling object working ONLY in Firefoxonclick 调用对象仅在 Firefox 中有效
【发布时间】：2014-04-06 11:17:52
【问题描述】：

正如我在标题中所说，我只能在 Firefox 中获取 onclick 调用对象：不能在 Chrome 中，不能在 IE 中，不能在 Safari 中。

总的来说，我对 ajax 和 javascript 还很陌生，所以我根据你们给出的答案构建了我的代码 here。

我有一个包含许多“产品”的 html 页面：对于每个产品，我都有一个带有隐藏字段的表单，其中包含有关产品的信息。每个表单都有两个（提交）按钮：一个是将产品“添加”到购物车，另一个是将产品从购物车中“移除”。我想识别被点击的按钮，以识别它所引用的产品，然后将其添加到购物车列表中或从购物车列表中取消。

这是页面的html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        TEST
    </title>

    <meta charset="utf-8">
<script src="form_submit.js" type="text/javascript">
</script>
</head>

<body>
    <form id="ajax_1" name="ajax_form" method="POST" action="test.php">
        <fieldset>
            <legend>My form</legend>
            <label for="stnz">Stnz</label><br />
            <input type="hidden" name="stnz" id="stnz" value="1" /><br />

            <label for="opz">Opz</label><br />
            <input type="hidden" name="opz" id="opz" value="1" /><br />


            <button id="ajax_1" type="submit" name="on">On</button>
            <button id="ajax_1" type="submit" name="off">Off</button><br />
        </fieldset>
    </form>
    <form id="ajax_2" method="POST" action="test.php">
        <fieldset>
            <legend>My form</legend>
            <label for="stnz">Stnz</label><br />
            <input type="hidden" name="stnz" id="stnz" value="1" /><br />

            <label for="opz">Opz</label><br />
            <input type="hidden" name="opz" id="opz" value="2" /><br />


            <button id="ajax_2" type="submit" name="on">On</button>
            <button id="ajax_2" type="submit" name="off">Off</button><br />
        </fieldset>
    </form>
    <form id="ajax_3" method="POST" action="test.php">
        <fieldset>
            <legend>My form</legend>
            <label for="stnz">Stnz</label><br />
            <input type="hidden" name="stnz" id="stnz" value="1" /><br />

            <label for="opz">Opz</label><br />
            <input type="hidden" name="opz" id="opz" value="3" /><br />


            <button id="ajax_3" type="submit" name="on">On</button>
            <button id="ajax_3" type="submit" name="off">Off</button><br />
        </fieldset>
    </form>
    <div id="responseArea">&nbsp;</div>
</body>
</html>

这是脚本代码：

window.onload = checkButton;
var xhr = false;
var on;
var stnz;   
var opz;
var url;



function checkButton() {
var el = document.getElementsByTagName('button');
for(var i=0; i<el.length; i++){
   el[i].onclick = function (e) {

    // Capturing the event  


e = e || window.event;
var targ = e.target || e.srcElement;

on = (targ.name == 'on') ? true: false;

var form = document.getElementById(targ.id);        
url = form.action;      
stnz = form.stnz.value;     
opz = form.opz.value;

makeRequest();
return false;

   };
}
 }


function makeRequest(){
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
}else {
  if (window.ActiveXObject) {
    try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    catch (e) { }
}   
 }

if (xhr){       
    var data = "stnz=" + stnz + "&opz=" + opz + "&act=";
    if(on){
             data = data + "1";
            } else {
                data = data + "0";
        }

    xhr.onreadystatechange = showContents;
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", data.length);
    xhr.setRequestHeader("Connection", "close");
    xhr.send(data);
     }
       }

function showContents(){    
    if(xhr.readyState == 4 && xhr.status == 200) {
        var return_data = xhr.responseText;
        console.log(return_data);
        } else {
            var return_data = "Sorry, but I couldn't create an XMLHttpRequest";
            console.log(return_data);
            }   
    /*document.getElementById("responseArea").innerHTML = return_data;*/
}

test.php 文件就是：

<?php
if (isset($_POST['stnz'],$_POST['opz'],$_POST['act'])){
$stnz= $_POST['stnz'];
$opz = $_POST['opz'];
$act = $_POST['act'];
echo "Stnz: " . $stnz . ", Opz: " . $opz . ", Azt: " . $act;
} 

?>

请帮我为 Chrome、IE 和 Safari 修复这个问题.... 另外，有没有更好的方法来获得相同的功能？（也许不使用表格？）非常感谢！

【问题讨论】：

标签： ajax internet-explorer google-chrome onclick xmlhttprequest

【解决方案1】：

每个浏览器都有自己的事件处理方法，使用jquery之类的库可以处理所有浏览器。

$(el[i]).click(function(e){});

使用 jquery 不是您可以通过添加浏览器特定代码来优化每个浏览器的代码的唯一解决方案，但这是灾难的秘诀。同样适用于您的 ajax 请求（跨浏览器问题）。

jquery 的设计考虑了所有浏览器，因此您只需编写一个代码，jquery 就可以处理浏览器特定的内容。

使用 jquery 的 ajax 示例： https://api.jquery.com/jQuery.ajax/

$.ajax({
   url : url,
   type:'POST',
   data:{"stnz" : stnz , "opz" : opz , "act" : (on ? 1 : 0)}
   success : function (data){

   },
   error:function(){}
});

【讨论】：

感谢您的回答。你认为使用 jQuery 是解决这个问题的唯一方法吗？此外，在脚本文件中到处使用一些“console.log()”，我想我发现问题出在 makeRequest 函数中：看起来 Chrome、IE 和 Safari 不允许 XMLHttpRequest 通过，但这对我来说似乎很好。你能发现代码中的任何错误吗？再次感谢您的帮助。
谢谢。看来我解决了这个问题：与代码无关，只是配置设置。 Chrome、IE 和 Safari 不是我的主要浏览器，出于某种奇怪的原因，它们的初始配置不允许我执行 XMLHttpRequest（不要问我为什么！）。正确重置所有内容，现在一切正常。