VUE - axios Post не работи

Искам да направя ajax повикване на VUE.JS, което може да се направи от axios. Правя това обаждане от JS файл и по-долу е кодът, който опитах досега.

    <div id="VueCalling">    
        <div class="container">
            <label>Please enter thought </label>
        <input type="text" id="txtThought" class="form-control textboxCustm" v-model="textThought" />
        </div>
        <input type="button" class="btn btn-info" id="btnInsert" value="Insert JS" v-on:click="greet" />
        <br />
        <br />

        <a href="/bgReadThought.aspx" class="btn btn-primary">Read all thoughts</a>
    </div>
</asp:Content>

Това беше моят HTML код и сега, както е посочено по-долу, JS код.

new Vue({
    el: '#VueCalling',
    data: function () {
        return {
            textThought: null,
            checkbox: null,
            text: null,
        }
    },
    methods: {
        greet: function (event) {
            // `this` inside methods points to the Vue instance
            var passedEmail = this.textThought;
            // `event` is the native DOM event
            axios.post('Default.aspx/InsertThoughtMethod?Thought="' + passedEmail + '"',
    {
        headers: {
            'Content-type': 'text/xml; charset=\"utf-8\"'
        },
    }, function (data) {
        alert(data);
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
        }
    }
});

Това е моят код зад метода:

[WebMethod]
    public static bool InsertThoughtMethod(string Thought)
    {
        return true;
    }

Проверих регистрационните файлове на конзолата и мрежата. Дава тази грешка. Мрежов регистър

Дебъгерът не достига до метода. Не мога да продължа.


person Prihaan    schedule 17.07.2018    source източник
comment
Изпълнен ли е методът greet? (можете да добавите конзолен дневник). След това отворете инструментите за разработка на браузъра си и проверете дали при щракване се изпраща http публикация. И също така ни кажете отговора от сървъра. (404, междусайтов скрипт, ...)   -  person user1497119    schedule 17.07.2018
comment
Вместо не работи би било полезно по-подробно обяснение. Докато отстранявате грешки в ajax заявки, често е добре да проверите следните подробности: Изпратена ли е заявката на първо място, ако да, какъв е кодът на състоянието. Ако зададете точка на прекъсване на контролера, получавате ли заявката там или не?   -  person Lassi Uosukainen    schedule 17.07.2018
comment
Извинете за това. Редактирах въпроса и добавих повече подробности   -  person Prihaan    schedule 17.07.2018
comment
500 показва вътрешна грешка на сървъра. Така че няма нищо лошо във вашата заявка за POST на axios. Трябва да проверите регистрирането на вашия сървър.   -  person puelo    schedule 17.07.2018
comment
Хей @puelo .. Да, прав си. Но работата е там, че поддържам програма за отстраняване на грешки в местоназначението и това не достига. Без да стигне до там, дава 500   -  person Prihaan    schedule 17.07.2018
comment
Тогава грешката вече е преди това - проверете как е направено вашето рутинг от страната на сървъра. Вашият регистър на грешките трябва да ви подскаже (stacktrace) къде да търсите.   -  person puelo    schedule 17.07.2018
comment
Зададохте ли вашия axios baseURL? axios.baseURL = 'localhost:51234';   -  person Kay Weng    schedule 18.07.2018
comment
Хей, @KayWeng, предполагам, че не съм правил това. можете ли да насочите как да направите?   -  person Prihaan    schedule 18.07.2018
comment
няма нужда да задавате baseURL неговия правилен URL адрес за задействане .. просто не получавам задействан дебъгер там   -  person Prihaan    schedule 20.07.2018


Отговори (1)


Работих върху този код и намерих решение. Кодът по-долу работи добре. Проверих.

new Vue({
el: '#VueCalling',
data: function () {
    return {
        textThought: null,
        checkbox: null,
        text: null,
    }
},
methods: {
    greet: function (event) {
        // `this` inside methods points to the Vue instance
        var passedEmail = this.textThought;

        // `event` is the native DOM event
        axios.post('Default.aspx/InsertThoughtMethod', { Thought : passedEmail }).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
    }
}
});
person Rush.2707    schedule 24.07.2018