Question

正如我在标题中所述，我只能在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的内容.... 此外，是否有更好的方法来获得相同的功能？（也许不使用表格？）非常感谢！

Answer 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(){}
});

onclick调用对象仅在Firefox中工作

1 个答案: