1

我试图在函数 getReqDetail 中将对象作为参数传递，但它返回 Uncaught SyntaxError: Unexpected identifier。但是，当我将一个简单的值（整数、布尔值、字符串）作为参数（例如 data[i].id）传递时，它就起作用了。那么我如何将对象作为参数传递

数据/对象来自ajax函数jquery

function agetAllRequests(){
    $.ajax({
        type: 'GET',
        url: `http://localhost:8080/api/requests`,
        headers: {
            "Content-Type": "application/json", "Accept": "application/json"
        },
        dataType:"json",
        success: function (data) {
            console.log("yes. data: " + data);
            if (data) {
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if(data[i]) {                            
                            console.log(data[i]);  
                            txt += `
                                    <tr class="hov" onclick="getReqDetails(${data[i]})">
                                           <td>${data[i].id}</td> 
                                           <td>${data[i].status}</td> 
                                           <td>${data[i].user.email}</td> 
                                           <td>${data[i].message}</td> 
                                           <td>${new Date(data[i].createdAt).toLocaleString()}</td>
                                    </tr>`;
                        }
                    }
                    if(txt){
                        $("#requestList").html(txt);
                    }
                }
            }
        },
        error: function (error) {
            console.log('errorCode: ' + error.status + ' . Message: ' + error.responseText);
        }
    });
}
function getReqDetails(data){
    console.log(data);
    return data;
}

编辑： 注意：函数 getReqDetails 在 ajax 函数之外

错误

4

4 回答 4

2

模板文字允许在运行时填充变量 ( ${myVar})，但结果将始终是一个字符串，因此模板的评估将导致getReqDetails([object Object]).

您可以做的是从您的对象呈现一个可序列化的值或存储对索引的引用，然后在被调用的函数中处理它getReqDetails()。

尝试将一个简单的值传递给您的字符串函数：

var data = [{id: 1},{id: 2}, {id: 3},];
if (data) {
    var len = data.length;
    var txt = ``;
       if (len > 0) {
         for (var i = 0; i < len; i++) {
            if(data[i]) {                           
            txt += `
            <tr class="hov" onclick="getReqDetails(${data[i].id})">
                  <td>...<td>
            </tr>`;}
}
if(txt){
           $("#requestList").html(txt);
}
}
function getReqDetails(reqId){
     console.log(reqId)
     return reqId;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="requestList" />

于 2018-12-27T09:28:19.967 回答
1

我认为首先该getReqDetails函数位于successAJAX 语句中的项目内是有问题的。既然它是一个onclick函数，我认为它应该是全局定义的。

回答您的主要问题时，Uncaught SyntaxError: Unexpected identifier通常会在您的代码语法有问题时调用。您可能有多余的/缺少的括号、双括号等。

查看代码中的第二if条语句，您的括号有一些问题。它应该如下所示：

  if (len > 0)
     for (var i = 0; i < len; i++) {
        if(data[i]) {                           
            console.log(data[i]);
            txt += `
            <!--<tr class="hov" onclick="getReqDetails(${data[i].id})">-->
            <tr class="hov" onclick="getReqDetails(${data[i]})">
                <td>...<td>
            </tr>`;
         }
     }

以下是我所做的更改：

  • 我删除了{你的，if (len > 0) {因为你里面只有一个语句，那就是for语句。
  • 我为该语句添加了另一个右括号 ( }) 。for

我希望这能解决你的问题。我建议您使用功能强大的代码编辑器（如Visual Studio Code或Atom）进行语法高亮、错误检查、调试等等。如果您更喜欢在终端上工作，我建议使用Vim。

此外，我强烈建议您getReqDetails在 AJAX 语句之外定义函数。我认为，您的代码使用整数作为输入的原因是因为 Javascript 上的数字（如果我没记错的话）没有length属性——这导致您的脚本不会调用任何错误，因为len值为null.

编辑

由于您希望对象成为 onclick 函数的参数，因此您需要先将其转换为字符串。您可以通过替换${data[i]}来做到这一点${JSON.stringify(data[i])}。然后在getReqDetails函数上，您使用该JSON.parse()函数将参数作为对象读取。

更新txt变量

txt += <tr class="hov" onclick="getReqDetails(${JSON.stringify(data[i])})"> <td>...<td> </tr>;

更新getReqDetails功能：

function getReqDetails(stringifiedObject){
    var data = JSON.parse(stringifiedObject)

    console.log(data);
    return data;
}
于 2018-12-27T10:07:19.693 回答
1

错误的原因是`onclick="getReqDetails(${data[i]})`它将解析为一个字符串。因为data[i]它不是一个字符串，所以它被转换为一个，即。“[对象对象]”。这使得onclick属性看起来像这样：

onclick="getReqDetails([object Object])"

但是该代码不是有效的 JavaScript，因此会出现错误。

为了将对象传递给函数，您真的不应该使用onclick必须具有字符串值的属性。而是绑定一个点击处理程序，如下所示：

    success: function (data) {
        console.log("yes. data: " + data);
        if (!data || !data.length) return;
        $("#requestList").empty(); // Clear whatever content there was before
        for (var i = 0; i < len; i++) {
            var item = data[i]; // Use a local variable to avoid repetition
            if(!item) continue;                            
            console.log(item);
            // Use jQuery methods to add the content and bind a click handler
            $("#requestList").append(
                $("<tr>").addClass("hov").append(
                    $("<td>").text(item.id),
                    $("<td>").text(item.status),
                    $("<td>").text(item.user.email),
                    $("<td>").text(item.message.id),
                    $("<td>").text(new Date(item.createdAt).toLocaleString())
                ).click(getReqDetails.bind(null, item)); // <-- click handler for TR
            );
        }
    },
于 2018-12-27T14:17:40.000 回答
0

您必须解析为 JSON 字符串化并清除特殊字符：

var json = JSON.stringify(data[i]).replace(/\"/g,"'")

现在它开始工作了！

于 2021-03-25T02:46:51.023 回答