2016-11-22 4 views
1

Rails에서 Ajax를 사용하여 잘못된 요청 오류 400이 발생했습니다. 양식을 제출할 때 Jquery에서 매개 변수로 보낼 문자열이 있고 params [: assignee]에서 검색하여 문자열을 추출하고 내 컨트롤러를 통해 저장할 수 있도록하고 싶습니다. 내 컨트롤러 :Ajax 잘못된 요청 400 Rails

$("#new_task").submit(function() { 
    alert("form: "+assignee); 
    //event.preventDefault(); 
$.ajax({ 
    url: "/tasks", 
    type: "POST", 
    data: {assignee}, 
    dataType: "json", 
    success: function(data) { 
     alert('successfully'); 
    }, 
    error: function(xhr, textStatus, error) { 
    alert(xhr.statusText+""+textStatus+""+error); 
    } 
    }); 
}); 

양수인이 JQuery와 자동 완성 폼에서 선택한 사용자 이름입니다 :

def create 
    @task = Task.new(task_params) 
    @task.user = current_user 
    username = params.permit[:assignee] 
    @task.assignee = username 

    #set_category 
    respond_to do |format| 
     if @task.save 
     format.html { redirect_to tasks_url, notice: 'Task was successfully created. '+task_params.inspect} 

     #format.html { redirect_to @task, notice: 'Task was successfully created.' } 
     format.json { render :show, status: :created, location: @task } 
     else 
     format.html { render :new } 
     format.json { render json: @task.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

def task_params 
    params.require(:task).permit(:owner, :value, :completed, :category, :date, :assignee) 

end 

그리고이 내 JS입니다

select: function(event, ui) { 
    var terms = split(this.value); 
    // remove the current input 
    terms.pop(); 
    // add the selected item 
    terms.push(ui.item.value); 
    // add placeholder to get the comma-and-space at the end 
    terms.push(""); 
    this.value = terms.join(""); 
    assignee=this.value; 
    $('input[name=commit]').prop("disabled",false); 

    return false; 
} 

내 루트는 "작업/저장된 작업과 새 작업을 만들 수있는 양식을 볼 수 있습니다. 인터넷에서 많은 부분을 검색해 보았습니다. 어떻게해야합니까? 너무 감사합니다

+0

만드는 작업을 생각 나게한다 "후 작업"의 내 양식 값을 잃을 수 있을까? – inye

+0

404 오류는 클라이언트가 경로를 찾을 수 없음을 의미합니다. routes.rb를 확인하십시오. –

+0

죄송합니다, 실수! 콘솔 : http : // localhost : 3000/tasks/400 (잘못된 요청) – ValeMarz

답변

3

400 잘못된 요청 - 서버는 나 때문에 명백한 클라이언트 오류 (예를 들어, 잘못된 요청 구문, 너무 큰 크기, 잘못된 요청 메시지 프레이밍, 또는기만에 요청을 처리하지 않을 수 없다 요청 라우팅).

wiki

변경 ajax 코드하려면 다음과 같이 유효하지 JSON 객체의

$.ajax({ 
    url: "/tasks", 
    type: "POST", 
    dataType: "json", 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), // Optional 
     'Content-Type': 'application/json' 
    }, 
    data: JSON.stringify({ assignee: assignee }), 
    success: function(data) { 
     alert('successfully'); 
    }, 
    error: function(xhr, textStatus, error) { 
    alert(xhr.statusText+""+textStatus+""+error); 
    } 
}); 

{assignee}{assignee: assignee} 는 또한 유효한 헤더를 추가해야합니다의 'Content-Type' 및 (X-CSRF-TOKEN 선택해야한다)

+0

ok console console에 오류가 없습니다. 그러나 매개 변수 담당자를 볼 수 없습니다 (params가 전달되었는지 검사하기 위해 "task_params.inspect를 알아 차린"것을 알 수 있습니다.) 경고는 "오류"오류를 표시합니다. – ValeMarz

+0

assignee = this.value;'should 'assignee'가'task' 키의 바깥에 있기 때문에 params를'params.inspect'로 검사하십시오. –

+0

상단에 var 지정자를 초기화했습니다. – ValeMarz

0

해결!

$("#new_task").submit(function(event) { 
    alert("form: "+assignee); 
    var value = $('#new_task').find('input[name="task[value]"]').val(); 
event.preventDefault(); 
$.ajax({ 
    url: "/tasks", 
    type: "post", 
    contentType: "application/json", 

    data: JSON.stringify({ assignee: assignee, value: value }), 
    success: function(data) { 
     alert('successfully'); 
    }, 
    error: function(xhr, textStatus, error) { 
    alert(xhr.statusText+" "+textStatus+" "+error); 
    } 
}); 

}); 

event.preventDefault(); ->이 양식이 없으면 양식이 두 번 제출됩니다.

var value = $('#new_task').find('input[name="task[value]"]').val(); ->이없이, 내가 있기 때문에 #이 브라우저 콘솔에서 무엇을 얻을