Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
166 views
in Technique[技术] by (71.8m points)

javascript - 如何使用Jquery从Asp .Net Core消费Apis(How to Consume Apis from Asp .Net Core using Jquery)

I have this Asp Net Core Web Api application as my backend with all the Apis that I need using default route system localhost\api\controller\id .

(我使用默认的路由系统localhost\api\controller\id将这个Asp Net Core Web Api应用程序作为我的所有Apis的后端。)

All Apis are working fine when calling from PostMan, but when I try to use Jquery Ajax to call them in my FrontEnd, things don't run properly.

(从PostMan进行调用时,所有Apis都可以正常工作,但是当我尝试使用Jquery Ajax在FrontEnd中调用它们时,事情就无法正常运行。)

Sorry if this question looks stupid, I'm new to JavaScript so ill really appreciate your guys help!

(抱歉,如果这个问题看起来很愚蠢,我是JavaScript的新手,所以非常感谢您的帮助!)

I only have got the 'Get' method to list in a table modifying the HTML with the result:

(我只有'Get'方法在用结果修改HTML的表中列出:)

$(document).ready(function () {
    $('#btn-lista-alunos').click(function () {
        $.ajax({
            url,
            type: 'GET',
            dataType: 'json', // Returns JSON
            success: function (response) {
                $('#tabela-alunos td').remove("");
                $('#info p').remove();
                var sTxt = '';
                $.each(response, function (index, val) {
                    sTxt += '<tr>';
                    sTxt += '<td>' + val.id + '</td>';
                    sTxt += '<td>' + val.nome + '</td>';
                    sTxt += '<td>' + val.ra + '</td>';
                    sTxt += '<td>' + val.curso + '</td>';
                    sTxt += '<td>' + val.periodo + '</td>';
                    sTxt += '<td>' + val.nota + '</td>';
                    sTxt += '<td>' + ValidaStatus(val.nota) + '</td>';

                    sTxt += '</tr>';
                });
                $('#tabela-alunos').append(sTxt);
            },
            error: function () {
                $('#info').html('<p>Ocorreu um erro, verifique a conex?o com a api!</p>');
            }
        });
    });
    //Botao Limpar Lista
    $('#btnClear').click(function () {
        $('#tabela-alunos td').remove();
        $('#info p').remove();
    });
});

My first Html Page:

(我的第一个HTML页面:)

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="Scripts/app.js"></script>
    <link rel="stylesheet" type = "text/css" href = "Content/content.css" />
    <title>Banco Alunos</title>
</head>

<body>
    <header>
        <h1>
            <p>Banco de Alunos</p>
        </h1>
    </header>

    <section class="sessao_botoes">
        <h2>
            <input onclick="location.href = 'incluir.html' ;" " id="btn-incluir" type="button" value="Incluir"/>
            <input id="btn-editar" type="button" value="Editar" />
            <input id="btn-excluir" type="button" value="Excluir" />
            <input id="btn-lista-alunos" type="button" value="Listar Alunos" />
            <input onclick="location.href = '' ;" " id="btn-incluir" type="button" value="Filtrar Alunos"/>
            <input id="btnClear" type="button" value="Limpar Listagem" />
        </h2>
    </section>

    <p><br /><br /></p>
    <section>
        <h3>
            <table id="tabela-alunos">
                <tr>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>RA</th>
                    <th>Curso</th>
                    <th>Periodo</th>
                    <th>Nota</th>
                    <th>Status</th>
                </tr>
            </table>
            <div id="updatemessage"></div>
            <p id="info"></p>
        </h3>
    </section>

</body>

</html>

My Second HTML Page with the Post Form:

(我的第二个带有发布表单的HTML页面:)

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="Scripts/app.js"></script>
    <title>Incluir Aluno</title>
</head>

<body>
    <header>
        <h1>
            <p>Incluir Novo Aluno</p>
        </h1>
    </header>
    <section>
        <h2>
            <form id="myForm" action="http://localhost:51700/api/Alunos" method="post">
                <p>
                    <label>Nome: </label>
                    <input type="text" name="nome">
                </p>
                <p>
                    <label>RA: </label>
                    <input type="number" maxlength="8" name="ra">
                </p>
                <p>
                    <label>Periodo: </label>
                    <input type="text" name="periodo">
                </p>
                <p>
                    <label>Curso: </label>
                    <input type="text" name="curso">
                </p>
                <p>
                    <label>Nota: </label>
                    <input type="number" max="10" maxlength="4" name="nota">
                </p>
                <p>
                    <input id="btnCadastro" type="submit" value="Cadastrar">
                </p>
            </form>
            <p>
                <input onclick="location.href = 'index.html'" type="submit" value="Voltar">
            </p>
        </h2>
    </section>
</body>

</html>

How can I use Ajax to send the form as a JSON to my BackEnd and Edit/Delete an Object Value Listed on my first page?

(如何使用Ajax将表单作为JSON发送到我的后端并编辑/删除第一页上列出的对象值?)

I already have tried quite a few things but none of that worked.

(我已经尝试了很多东西,但是都没有用。)

Thanks!

(谢谢!)

  ask by Lucas Lucena translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...