使用AJAX实时更新​​表单

Question

我有一个脚本，它采用两种形式并连接一些要禁用的表单部分。基本名字+姓氏=用户名。

<div class="form-group"> 
      <label for="first_name" class="control-label col-sm-4">First Name*</label> 
      <div class=" col-lg-8"> 
       <input type="text" 
        class="form-control" 
        id="first_name" 
        name="first_name" 
        pattern="[a-zA-Z\s]+" 
        data-pattern-error="Contains illegal characters." 
        required> 
        <div class="help-block with-errors"></div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="last_name" class="control-label col-sm-4">Last Name*</label> 
      <div class=" col-lg-8"> 
       <input type="text" 
        class="form-control" 
        id="last_name" 
        name = "last_name" 
        pattern="[a-zA-Z\s]+" 
        data-pattern-error="Contains illegal characters." 
        required> 
        <div class="help-block with-errors"></div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="username" class="control-label col-sm-4">Username*</label> 
      <div class=" col-lg-8"> 
       <input type="text" class="form-control" id="username" name="username" disabled> 
      </div> 
     </div> 

脚本

$(document.body).on('focusout keyup', '#form-create-user input[name*="_name"]', function(e) { 
     $.ajaxSetup({ 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
      } 
     }); 

     e.preventDefault(); 

     firstName = $('#form-create-user #first_name').val().trim().toLowerCase(); 
     lastName = $('#form-create-user #last_name').val().trim().toLowerCase() 

     var initials = firstName.match(/\b\w/g) || []; 
     initials = ((initials.shift() || '') + (initials.pop() || '')).toLowerCase(); 

     // username = initials.concat(lastName); 
     tempUsername = initials.concat(lastName); 

     $.ajax({ 
      url: '{{url("generateusername")}}', 
      type:'GET', 
      data: { genusername: tempUsername}, 
      success: function(rpx){ 
      username = rpx; 
      } 
     }); 

     $('#form-create-user #username').val(username); 

    }); 

我也试过，但它只是在形式返回[objectHTMLInputElement]

$.ajax({ 
      url: '{{url("generateusername")}}', 
      type:'GET', 
      data: { genusername: tempUsername}, 
      success: function(rpx){ 
      username = rpx; 
      } 
     }); 

     $('#form-create-user #username').val(username); 

现在我正在使用laravel的generateusername路线

Route::get('/generateusername/{uname}', 'UsersController@generateUsername'); 

包含此

public function generateUsername() 
{ 
    //fetch firstname in Database 
    $fname = User::select(['first_name', 'username'])->where('username', $_GET['genusername'])->where('first_name', '!=', $request->first_name)->first();//if returning one row use this or your going to have a hard time with objects 

    $fnameval = $fname->first_name; 
    $fnameArr = str_split($fname->first_name); 

    //request firstname 
    $reqFname = $request->first_name; 
    $reqFnameArr = str_split($reqFname); 

    //final username 
    $tempUserName = ''; 
    if(strlen($reqFname) > strlen($fnameval) || strlen($reqFname) == strlen($fnameval)) { 
    for($i = 0; $i < strlen($fnameval); $i++) { 
    if($reqFnameArr[$i] == $fnameArr[$i]) { 
     $tempUserName .= $reqFnameArr[$i]; 
    } 
    } 
} else if (strlen($reqFname) < strlen($fnameval)) { 
    for($i = 0; $i < strlen($reqFname); $i++) { 
    if($reqFnameArr[$i] == $fnameArr[$i]) { 
     $tempUserName .= $reqFnameArr[$i]; 
    } 
    } 
} 

    $primaryUsername = strtolower($tempUserName.$request->last_name); 
    $tempUserName = ''; 

    $indexForWhile = 0; 
    //as long as there is an existing username in the database keep advancing the index for first_name request 
    while(User::where('username', $primaryUsername)->exists()) { 

     $tempUserName .= $reqFnameArr[$indexForWhile++]; 
     $primaryUsername = strtolower($tempUserName.$request->last_name); 
    } 
    $indexForWhile = ''; 

    return $primaryUsername; 

} 

但我得到的数值仅是空或[objectHTMLInputElement]

你能帮我解决这个问题，朋友？

Answer 1

我看不到变量username是在任何地方定义的。因此，它可能被用作其他地方的全球网络，因此具有此[objectHTMLInputElement]值。 另请参见：#username输入的分配必须在ajax调用的成功回调中完成。

我建议你尝试类似：

$.ajax({ 
    url: '{{url("generateusername")}}', 
    type:'GET', 
    data: { genusername: tempUsername}, 
    success: function(rpx){ 
     var username = rpx; 
     $('#form-create-user #username').val(username); 
    } 
}); 

您还应该添加一个错误回调来测试Ajax调用在所有工作。