1

Только приступил к изучению AJAX. Используя IDE "MS Visual Studio 2015 Express для Web" начал разбирать пример, в котором при нажатии клавиши выводится дата, но у меня при нажатии ни чего не происходит, пожалуйста помогите в решении проблемы. Код в файле ajax.aspx:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax.aspx.cs"      Inherits="RudenSoft.jQuery.Ajax" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>          
 <title></title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
    <button class="b1" >send ajax</button>
    <span class="dt"></span>
 </div>
 </form>
 <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
    $(function () {
        $('.b1').click(function (e) {
            e.preventDefault();

            var param = {
                count: 2, name: 'Max'
            };

            var data = JSON.stringify(param);
            console.log(data);
            $.ajax({
                type: 'POST',
                url: '/jquery/ajax.aspx/gettime',
                dataType: 'json',
                cache: false,
                contentType: 'application/json; charset=utf-8',
                data: data,
                success: function (data, status) {
                    var obj = data;
                    if (data.d != undefined) obj = data.d;
                    var response = eval(obj);
                    if (response.result == '1') {
                        $('.dt').html(response.s);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("error = " + xhr.status + thrownError);
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Contetnt-type', 'application/json; charset=utf-8');
                }
            });
        });
    });
</script>

Код в файле ajax.aspx.cs:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Services;
 using System.Web.UI;
 using System.Web.UI.WebControls;

 namespace RudenSoft.jQuery
 {
     public partial class Ajax : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {

         }

         [WebMethod]
         public static string gettime(int count, string name){
             var res = "";

             var d = DateTime.Now.ToString() + ", " + name;
             res = "{ \"result\":\"1\", \"s\":  \"" + d + "\"}";

             return res;
         }
     }
 }

Ошибка из консоли: введите сюда описание изображения

8
  • добавьте console.log(data); перед var obj = data; и сообщите, что появилось в консоли браузера. xhr.setRequestHeader('Content-type', ...
    – user176262
    Commented 1 февр. 2017 в 5:24
  • Что в инструментах разработчика показывается? Commented 1 февр. 2017 в 7:57
  • Ох уж не знаю, где Вы пример взяли, но тут явно что-то не так. Это же WebForms, не так ли? А там случайно на батон не нужно тоже прописать runat="server"? И кнопка случайно не так должна делаться: <asp:Button...? Commented 1 февр. 2017 в 13:39
  • В консоли вылезла следующая ошибка (ссылка): drive.google.com/open?id=0B3KIIbzlo9PlMXh1M0FjQnlGaVU
    – student007
    Commented 1 февр. 2017 в 19:13
  • Denis Bubnov я только начал изучение ajax и к сожалению не смогу поддержать диалог )) Мне на данный момент требуется чтобы данный пример заработал для освоения json и ajax.
    – student007
    Commented 1 февр. 2017 в 19:19

2 ответа 2

1

Внесите следующие изменения в свой код:

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
        <button class="b1">send ajax</button>
        <span class="dt"></span>
    </div>
</form>

ScriptManager - управляет библиотекой скриптов AJAX для ASP.NET и файлами скриптов, частичной отрисовкой страниц и созданием прокси-класса клиента для веб-служб и служб приложений.

А еще немного изменил бы javascript, вот так:

 <script type="text/javascript">
    $(document).ready(function () {
        $('.b1').click(function (e) {
            // тут Ваш код ajax
        }
    }); 
</script>

И небольшой вопрос, зачем делать отмену действия браузера: e.preventDefault();? Ну, это было отступление, теперь снова далее, что бы переделал еще. Кнопку внутри формы сделал бы вот такой:

<button ID="btnGetTime">send ajax</button>

Если у Вас в класс "b1" не содержит никаких стилей можем спокойно убрать. Ну и javascript поменялся бы под кнопку и стал бы вот таким:

<script type="text/javascript">
    $(document).ready(function () { 
        $('#btnGetTime').click(function() {
            // e.preventDefault(); - делать не нужно
            $.ajax({
                // тут Ваш код ajax
            });
            return false;
        });
     }); 
</script>

И еще один небольшой совет, мне очень уж не нравится Ваш url, сделайте вот так:

url: '<%= ResolveUrl("~/ajax.aspx/gettime") %>'

По поводу использования некоторых аттрибутов в Вашем ajax я не совсем уверен, к примеру не думаю, что Вам нужен beforeSend, и содержимое error тоже можно упростить.


ScriptManager - использовать не обязательно, но на всякий случай я его упомянул. У Вас url такой интересный: /jquery/ajax.aspx/gettime. Есть небольшой совет: создать проект с нуля, при этом не называть классы и папки ключевыми словами типа: jquery, ajax и т.п. Про preventDefault можете почитать тут: Действия браузера по умолчанию

8
  • Денис спасибо Вам, извините, что долго не отвечал, были проблемы со здоровьем. Исправил свой код согласно Вашим рекомендациям:
    – student007
    Commented 7 февр. 2017 в 0:37
  • <form id="form1" runat="server"> <div> <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" /> <button id="btnGetTime" >send ajax</button> <span class="dt"></span> </div> </form>
    – student007
    Commented 7 февр. 2017 в 0:45
  • В элементе button заместо класса class="b1" вставил идентификатор btnGetTime. И функцию переделал по инструкции выше. В итоге ошибка изменилась на: "drive.google.com/open?id=0B3KIIbzlo9PlRnY5Z05fS1lHR0E". Так понимаю не может найти функцию gettime. На данный момент ковыряюсь с данной ошибкой плюс изучаю материал который Вы дали. @Denis Bubnovещё раз спасибо.
    – student007
    Commented 7 февр. 2017 в 1:00
  • @student007, не могу посмотреть ошибку, которую Вы в ссылке дали. Вы в формировании ajax-запроса для url использовали ResolveUrl? Commented 7 февр. 2017 в 6:38
  • @student007, добавьте новую ошибку в вопрос что ли, чтобы было понятно в чем проблема, чтобы можно было помочь Вам :) И для url используйте ResolveUrl ) Commented 7 февр. 2017 в 8:10
0

Иногда из за настройки сервера ajax url работает case sensitive, измените код

url: '/jQuery/Ajax.aspx/gettime'

или вот так

url: 'Ajax.aspx/gettime'
1
  • 1
    К сожалению не сработало.
    – student007
    Commented 1 февр. 2017 в 18:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.