Ошибка ajax соединения

Добрый вечер дорогие форумчане. Подскажите пожалуйста, почему при попытке отправить ajax запрос, у меня выскакивает alert из error??? Всю голову уже сломал, весь интернет уже перерыл.
2) И почему после того как я нажимаю ок в alert у меня перезагружается страница??

шаблон

{% extends "crm/main_struct.html" %}
{% load staticfiles %}

{% block content %}

<!--ОБЯЗАТЕЛЬНО СДЕЛАТЬ ФУНКЦИЮ НА JS КОТОРАЯ БУДЕТ ВЫЧИСЛЯТЬ ОТСТУПЫ И В НУЖНОЕ МЕСТО ПИХАТЬ КОНТЕНТ САЙТОВ-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('ul.tabs_m_w').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var p = $(this).parents('div.tabs_container_m_w');
        p.find('div.tab_container_m_w').hide();
        p.find('div.tab_container_m_w:eq(' + i + ')').show();
      });
    });
  });
})
</script>
<a href="{{url}}/crm/my_work/new/" class="add_notebook_a">
    <div class="add_notebook">Добавить</div>
</a>
<div class="tabs_container_m_w">
  <ul class="tabs_m_w">
      {% for notebook in notebookList %}
        <li class="inl-bl_m_w">
            <div class="m_w_list_head">{{notebook.name}}</div>
            <div class="m_w_list_date">{{notebook.date_firstly}}</div>
            <div class="m_w_list_kr_info">{{notebook.kr_info}}</div>
        </li>
      {% endfor %}
  </ul>

    {% for notebook in notebookList %}
  <div class="tab_container_m_w">
      <a href="" onclick="resend({{notebook.id}});" class="a_tab">
          <div class="m_w_save">
            Сохранить
          </div>
      </a>
    <div class="m_w_info_head" id="name{{notebook.id}}" contentEditable="true">{{notebook.name}}</div>
      <div class="m_w_info_info" id="info{{notebook.id}}" contentEditable="true">{{notebook.information}}</div>
  </div>
{% endfor %}

</div>

<script>
    function resend(pk){
           var name = document.getElementById('name' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           var info = document.getElementById('info' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           edit(name, info, pk);
    }
</script>

<script>
function edit(name, info, pk) {
// Если поля заполнены, отправляем их значения
        $.ajax({
            error: function() {
                alert('Ошибка получения запроса');
            },
    // При успехе очищаем поля и меняем кнопочку
                success: function(data) {
                 alert("Успех"); // для проверки, что скрипт работает
                },
    // CSRF механизм защиты Django
                beforeSend: function(xhr, settings) {
                    console.log('-------------before send--');
                    function getCookie(name) {
                        var cookieValue = null;
                        if (document.cookie && document.cookie != '') {
                            var cookies = document.cookie.split(';');
                            for (var i = 0; i < cookies.length; i++) {
                                var cookie = jQuery.trim(cookies[i]);
                                // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                    }
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        // Only send the token to relative URLs i.e. locally.
                        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                    }
                }
            });// ajax


        return false;
    };
</script>
{% endblock %}

urls.py

urlpatterns = patterns('',
    url(r'^my_work/edit/$', views.NBEdit, name='crm_edit_NB'),
)

views.py

def NBEdit(request):
    if request.is_ajax():
        for i in MyDela.objects.filter(pk=request.POST.get("id", "")):
            i.name = request.POST.get("name", "")[:250]
            i.information = request.POST.get("info", "")
            i.save()
        #  return HttpResponse("ok")
        return HttpResponseRedirect('/crm/sites/')
    else:
        #  return HttpResponse("bad")
        return HttpResponseRedirect('/crm/zayvki/')

Прошу не кидаться помидорами, я только учусь кодить))

Can you post the signature of your method that is supposed to accept this post?

Additionally I get the same error message, possibly for a different reason. My YSOD talked about the dictionary not containing a value for the non-nullable value.
The way I got the YSOD information was to put a breakpoint in the $.ajax function that handled an error return as follows:

<script type="text/javascript" language="javascript">
function SubmitAjax(url, message, successFunc, errorFunc) {
    $.ajax({
        type:'POST',
        url:url,
        data:message,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success:successFunc,
        error:errorFunc
        });

};

Then my errorFunc javascript is like this:

function(request, textStatus, errorThrown) {
        $("#install").text("Error doing auto-installer search, proceed with ticket submissionn"
        +request.statusText); }

Using IE I went to view menu -> script debugger -> break at next statement.
Then went to trigger the code that would launch my post. This usually took me somewhere deep inside jQuery’s library instead of where I wanted, because the select drop down opening triggered jQuery. So I hit StepOver, then the actual next line also would break, which was where I wanted to be. Then VS goes into client side(dynamic) mode for that page, and I put in a break on the $("#install") line so I could see (using mouse over debugging) what was in request, textStatus, errorThrown. request. In request.ResponseText there was an html message where I saw:

<title>The parameters dictionary contains a null entry for parameter 'appId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ContentResult CheckForInstaller(Int32)' in 'HLIT_TicketingMVC.Controllers.TicketController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.<br>Parameter name: parameters</title>

so check all that, and post your controller method signature in case that’s part of the issue

Can you post the signature of your method that is supposed to accept this post?

Additionally I get the same error message, possibly for a different reason. My YSOD talked about the dictionary not containing a value for the non-nullable value.
The way I got the YSOD information was to put a breakpoint in the $.ajax function that handled an error return as follows:

<script type="text/javascript" language="javascript">
function SubmitAjax(url, message, successFunc, errorFunc) {
    $.ajax({
        type:'POST',
        url:url,
        data:message,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success:successFunc,
        error:errorFunc
        });

};

Then my errorFunc javascript is like this:

function(request, textStatus, errorThrown) {
        $("#install").text("Error doing auto-installer search, proceed with ticket submissionn"
        +request.statusText); }

Using IE I went to view menu -> script debugger -> break at next statement.
Then went to trigger the code that would launch my post. This usually took me somewhere deep inside jQuery’s library instead of where I wanted, because the select drop down opening triggered jQuery. So I hit StepOver, then the actual next line also would break, which was where I wanted to be. Then VS goes into client side(dynamic) mode for that page, and I put in a break on the $("#install") line so I could see (using mouse over debugging) what was in request, textStatus, errorThrown. request. In request.ResponseText there was an html message where I saw:

<title>The parameters dictionary contains a null entry for parameter 'appId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ContentResult CheckForInstaller(Int32)' in 'HLIT_TicketingMVC.Controllers.TicketController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.<br>Parameter name: parameters</title>

so check all that, and post your controller method signature in case that’s part of the issue

This is a tutorial on how to handle errors when making Ajax requests via the jQuery library. A lot of developers seem to assume that their Ajax requests will always succeed. However, in certain cases, the request may fail and you will need to inform the user.

Here is some sample JavaScript code where I use the jQuery library to send an Ajax request to a PHP script that does not exist:

$.ajax({
     url: 'does-not-exist.php',
     success: function(returnData){
         var res = JSON.parse(returnData);
     },
     error: function(xhr, status, error){
         var errorMessage = xhr.status + ': ' + xhr.statusText
         alert('Error - ' + errorMessage);
     }
});

If you look at the code above, you will notice that I have two functions:

• success: The success function is called if the Ajax request is completed successfully. i.e. If the server returns a HTTP status of 200 OK. If our request fails because the server responded with an error, then the success function will not be executed.
• error: The error function is executed if the server responds with a HTTP error. In the example above, I am sending an Ajax request to a script that I know does not exist. If I run the code above, the error function will be executed and a JavaScript alert message will pop up and display information about the error.

The Ajax error function has three parameters:

• jqXHR
• textStatus
• errorThrown

In truth, the jqXHR object will give you all of the information that you need to know about the error that just occurred. This object will contain two important properties:

• status: This is the HTTP status code that the server returned. If you run the code above, you will see that this is 404. If an Internal Server Error occurs, then the status property will be 500.
• statusText: If the Ajax request fails, then this property will contain a textual representation of the error that just occurred. If the server encounters an error, then this will contain the text “Internal Server Error”.

Obviously, in most cases, you will not want to use an ugly JavaScript alert message. Instead, you would create an error message and display it above the Ajax form that the user is trying to submit.

JQuery 3.0: The error, success and complete callbacks are deprecated.

Update: As of JQuery 3.0, the success, error and complete callbacks have all been removed. As a result, you will have to use the done, fail and always callbacks instead.

An example of done and fail being used:

$.ajax("submit.php")
  .done(function(data) {
      //Ajax request was successful.
  })
  .fail(function(xhr, status, error) {
      //Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText
      alert('Error - ' + errorMessage);
})

Note that always is like complete, in the sense that it will always be called, regardless of whether the request was successful or not.

Hopefully, you found this tutorial to be useful.

By Rod McBride

jQuery has a lot of methods to define and process AJAX requests in a convenient fashion, but one useful feature added to jQuery in version 1.0 is often overlooked by developers. 

The ajaxError() method is a method that can serve as a centralized place for AJAX request error handling. In general, unexpected server responses are handled similarly as on a web page, such as when a notification or a modal dialogue appears to tell the user that something unexpected happened and the operation has failed. 

By looking at the jQuery documentation for the AJAX convenience methods, like $.post and $.get, we notice that we can attach callback methods to successful and failed AJAX calls. 

$.post(«/api/sendStuff», function () {

    //… handle success

}).fail(function () {

    //… handle failure and display notification

});

Having a way to handle errors on individual AJAX calls is a great way to fine-tune your JavaScript and deal with specific error scenarios close to their occurrences. However, being aware of a centralized AJAX error-handling routine could avoid scenarios similar to this:

$.post(«/api/operationA», function(){

   //…

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

$.post(«/api/operationB», function(){

   //…

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

$.post(«/api/operationC», function(){

   //…

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

…

In this scenario, the developer created a sophisticated, dynamic, single-page application driven by a collection of AJAX requests and wrote a method that processes errors thrown by those AJAX requests. Technically, there isn’t anything wrong with this solution. However, it isn’t the most elegant approach and causes a lot of repeated code fragments. 

We can get rid of all the redundant fail callbacks by defining the default behavior of the page in case an AJAX exception occurs with ajaxError(). The method needs to be attached to the document object and will serve as a centralized processing place for those types of AJAX scenarios:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   handleError(error);

});

This global handler will always fire upon an error situation regardless if there is a defined local fail callback. Consequently, the following code fragment will display both error notifications at the same time:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   showErrorNotificationA(error);

});

$.post(«/api/operationA», function(){

   //…

}).fail(function(jqXHR, textStatus, error){

   showErrorNotificationB(error);

});

To suppress the global error handler and prevent duplicate notifications requires adding some additional logic that gives more control over it.

One way to accomplish this is to define a flag in the settings of the AJAX request that determines whether the global error handler should fire.

The biggest disadvantage of this approach is that you can’t use $.post() and $.get() anymore for these kinds of requests, and we need to fall back to $.ajax() that gives more granular control over the request. Here is an example:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   if(!settings.suppressGlobalErrorHandler){

         handleError(error);

   }

});

$.ajax(«/api/operationA», {

   suppressGlobalErrorHandler: true,

   success: function(){

      //…

   },

   error: function(jqXHR, textStatus, error){

      //…

   }

});

If you’d like to learn more about the AJAX error handling or have other jQuery or JavaScript questions, contact the technology consultants at Wipfli. You can also keep reading more of our technology-focused articles here.

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

$.ajax({
	url: '/index.php',         /* Куда пойдет запрос */
	method: 'get',             /* Метод передачи (post или get) */
	dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
	data: {text: 'Текст'},     /* Параметры передаваемые в запросе. */
	success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
		alert(data);            /* В переменной data содержится ответ от index.php. */
	}
});

$.get('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_GET['text'];

$.ajax({
	url: '/index.php',
	method: 'get',
	cache: false
});

$.ajax({
	url: '/index.php',
	method: 'post',
	dataType: 'html',
	data: {text: 'Текст'},
	success: function(data){
		alert(data);
	}
});

$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_POST['text'];

<div class="form_container">
	<div id="message"></div>
	<form id="form">
		<input type="text" name="login">
		<input type="text" name="password">
		<input type="submit" name="send" value="Отправить">
	</form>
</div>

<script>
$("#form").on("submit", function(){
	$.ajax({
		url: '/handler.php',
		method: 'post',
		dataType: 'html',
		data: $(this).serialize(),
		success: function(data){
			$('#message').html(data);
		}
	});
});
</script>

if (empty($_POST['login'])) {
	echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
	echo 'Укажите пароль';
} else {
	echo 'Авторизация...';
}

$.ajax({
	url: '/json.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		alert(data.text);    /* выведет "Текст" */
		alert(data.error);   /* выведет "Ошибка" */
	}
});

$.getJSON('/json.php', function(data) {
	alert(data.text);
	alert(data.error);
});

header('Content-Type: application/json');

$result = array(
	'text'  => 'Текст',
	'error' => 'Ошибка'
);

echo json_encode($result);

...

// Очистка буфера
ob_end_clean(); 
		
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();

$.ajax({
	method: 'get',
	url: '/script.js',
	dataType: "script"
});

$.getScript('/script.js');

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	success: function(data){
		text = data;
	}
});

alert(text);  /* Переменная будет пустая. */

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	async: false,
	success: function(data){
		text = data;
	}
});

alert(text); /* В переменной будет результат из index.php. */

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	headers: {'Token_value': 123},
	success: function(data){
		console.dir(data);
	}
});

<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		console.dir(data);
	},
	error: function (jqXHR, exception) {
		if (jqXHR.status === 0) {
			alert('Not connect. Verify Network.');
		} else if (jqXHR.status == 404) {
			alert('Requested page not found (404).');
		} else if (jqXHR.status == 500) {
			alert('Internal Server Error (500).');
		} else if (exception === 'parsererror') {
			alert('Requested JSON parse failed.');
		} else if (exception === 'timeout') {
			alert('Time out error.');
		} else if (exception === 'abort') {
			alert('Ajax request aborted.');
		} else {
			alert('Uncaught Error. ' + jqXHR.responseText);
		}
	}
});

$.ajaxSetup({
	error: function (jqXHR, exception) {
		...
	}
});