$ .ajax（）給出[對象HTMLInputElement]而不是值

Question

我有一個$ .ajax（）請求正常工作，它調用3個ID。沒有問題的唯一ID是名稱ID。 clientId在控制檯上記錄的很好，但在表格上打印未定義。該URL正在打印表格和控制檯上的[對象HTMLInputElement]，日誌如下<input class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://stuffpage/redirect/?id=1" required="">。我想要打印我在輸入中引入的url。

你能告訴我是什麼問題嗎？

$('#saveButton').on('click', function() { 
 

 
    var url = "http://stuffpage.com/redirect/redirect"; 
 

 
    var name = $('#name').val(); 
 
    console.log("name", name); 
 
    var clientId = $('#clientId').val(); 
 
    console.log("clicentId", clientId); 
 
    var redirecUrl = $('#redirectUrl').val(); 
 
    console.log("redirectUrl", redirectUrl); 
 

 
    var formData = new FormData(); 
 
    formData.append('name', name); 
 
    formData.append('client_id', clientId); 
 
    formData.append('url', redirectUrl); 
 
    console.log('test') 
 
    $.ajax({ 
 
    url: url + "/saveRedirect", 
 
    type: "POST", 
 
    dataType: "json", 
 
    data: formData, 
 
    contentType: false, 
 
    cache: false, 
 
    processData: false, 
 
    success: function(obj) { 
 
     var name, clientId, redirecUrl; 
 
     var rows = ''; 
 
     for (i = 0; i < obj.length; i++) { 
 
     rows += "<tr class='lightgrey'><th>" + obj[i].name + "</th><td>" + obj[i].clientId + "</td><td>" + obj[i].url + "</td><td><img id='editButton' class='col-md-2 edit nopad' src='http://stuffpage.com/redirect/public/img/edit.svg'><img class='col-md-2 link nopad float-right' src='http://stuffpage.com/redirect/public/img/copy.svg'></td></td></tr>"; 
 
     $("#table").append(rows); 
 
     console.log('sucess!'); 
 
     } 
 
    }, 
 
    error: function() { 
 
     console.log('error'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="col-md-12 marg-t-30 nopad"> 
 
    <!--REGISTER NAME CLIENT ID URL--> 
 
    <div class="col-md-1 nopad"> 
 
    <div class="rtitle"> 
 
     <div class="roboto-condensed">name</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 nopad" style="margin-right: 20px;"> 
 
    <input class="form-control no-border" id="name" type="text" name="nameClient" placeholder="Insert name..." required=""> 
 
    </div> 
 
    <div class="col-md-1 nopad"> 
 
    <div class="rtitle"> 
 
     <div class="roboto-condensed">client id</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 nopad"> 
 
    <select class="form-control no-border selectpicker" name='clientId' id='clientId' data-show-subtext="true" required=""> 
 
\t \t \t \t \t \t <?php echo $client_data;?> 
 
\t \t \t \t \t </select> 
 
    </div> 
 
    <div class="col-md-3 nopad"> 
 
    <button id="saveButton" class="save float-right">SAVE</button> 
 
    </div> 
 
    <div class="col-md-12 nopad marg-t-20"> 
 
    <div class="col-md-1 nopad"> 
 
     <div class="rtitle"> 
 
     <div class="roboto-condensed">url</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-11 nopad"> 
 
     <input class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://stuffpage/redirect/?id=1" required="" value=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--col-md-12-->

Answer 1

看起來你有一個錯字：

var redirecUrl = $('#redirectUrl').val();

應該

var redirectUrl = $('#redirectUrl').val();

Answer 2

您可以更換

var clientId = $('#clientId').val();

給你不使用`JSON.parse（OBJ）`對AJAX結果

var clientId = $('#clientId option:selected').val();

而且

var redirectUrl = $('#redirectUrl').val();