如何在javascript页面中调用网络服务?

我想在javascript页面内调用webservice吗?

提交表单后,我想致电网络服务

我在insertdatawebservice方法中编写ado.net插入代码

我创建了2个独立项目

1个项目Web服务

http://localhost:1511/WebService1.asmx?op=InsertData

namespace WebServiceDemo
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["cnn"].ConnectionString);
        [WebMethod]
        public string InsertData(string fname, string mname, string lname, string emailid, string password, string contactno, string hobby, string address, string countrycodenum)
        {
            cn.Open();
            string data = "";
            string insertquery = "insert into tblstudent(fname, mname, lname, emailid, password, contactno,hobby,address,countrycodenum)values(@fname,@mname,@lname,@emailid,@password,@contactno,@hobby,@address,@countrycodenum)";

            SqlCommand cmd = new SqlCommand(insertquery, cn);
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@fname", fname);
            cmd.Parameters.AddWithValue("@mname", mname);
            cmd.Parameters.AddWithValue("@lname", lname);
            cmd.Parameters.AddWithValue("@emailid", emailid);
            cmd.Parameters.AddWithValue("@password", password);
            cmd.Parameters.AddWithValue("@contactno", contactno);
            cmd.Parameters.AddWithValue("@hobby", hobby);
            cmd.Parameters.AddWithValue("@address", address);
            cmd.Parameters.AddWithValue("@countrycodenum", countrycodenum);

            int i = cmd.ExecuteNonQuery();
            if (i > 0)
            {
                Console.WriteLine("Insert Successfully");
            }
            else
            {
                Console.WriteLine("Not Insert Successfully");
            }
            cn.Close();

            return data;
        }
    }
}

web.config

  </system.web>
   <connectionStrings>
    <add name="cnn" connectionString="Server= DEVISSHAHID; Database= dbstudent; User Id=sx;Password=****" providerName="System.Data.SqlClient"/>
  </connectionStrings>

当我使用Web服务插入数据时,则不会显示数据

enter image description here

用户提交表单时的2个项目

http://localhost:25730/signup.html

signup.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

    <script src="signup.js"></script>
</head>
<body>
    <form id="txtPersonalInformation">
        <h1>Personal Information</h1>

        <label for="txtfname">First Name:</label>
        <input id="txtfname" name="txtfname" type="text" /><br />

        <label for="txtmname">Middle Name:</label>
        <input id="txtmname" name="txtmname" type="text" /><br />

        <label for="txtlname">Last Name:</label>
        <input id="txtlname" name="txtlname" type="text" /><br />

        <input id="btnnext" type="submit" value="Next" />
    </form>
</body>
</html>

signup.js

$(document).ready(function () {
    $('#btnnext').click(function (event) {
            debugger
            sessionStorage.clear();
            sessionStorage.setItem("firstName", $("#txtfname").val());
            sessionStorage.setItem("lastName", $("#txtlname").val());
            sessionStorage.setItem("middleName", $("#txtmname").val());

            $("#txtPersonalInformation").load("ContactInformation.html");
        }

    });
});

ContactInformation.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

    <script src="ContactInformation.js"></script>
</head>
<body>
    <form id="txtContactInformation">
        <h1>Contact Information</h1>

        <label for="txtemailid">EmailAddress:</label>
        <input id="txtemailid" name="txtemailid" type="text" /><br />

        <label for="txtpass">Password:</label>
        <input id="txtpass" name="txtpass" type="password" /><br />

        <label for="txtcontactno">Contact No:</label>
        <input id="txtcontactno" name="txtcontactno" type="number" /><br />

        <label for="txtHobby">Hobby:</label>
        <input id="txtHobby" name="txtHobby" type="text" /><br />

        <label for="txtAddress">Address:</label>
        <input id="txtAddress" name="txtAddress" type="text" /><br />

        <label for="txtcountrycodenum">CountryCodeNum:</label>
        <input id="txtcountrycodenum" name="txtcountrycodenum" type="text" /><br />

        <input id="btnsubmit" type="submit" value="Submit" />

    </form>
</body>
</html>

ContactInformation.js

$(document).ready(function () {
    $("#btnsubmit").click(function (event) {

debugger
            sessionStorage.setItem("emailid", $("#txtemailid").val());
            sessionStorage.setItem("pass", $("#txtpass").val());
            sessionStorage.setItem("contactno", $("#txtcontactno").val());
            sessionStorage.setItem("Hobby", $("#txtHobby").val());
            sessionStorage.setItem("Address", $("#txtAddress").val());
            sessionStorage.setItem("CountryCodeNum", $("#txtcountrycodenum").val());


    });
});

我想要的

提交表单时,我想调用InsertData Web服务吗?